Demos
Flowtext
DOM-free layout for Canvas, WebGL, SVG, and server-side rendering. One layout tree, every renderer.
Text Reflow
The Problem
DOM-based layout requires the browser to measure text. Outside the browser -- in Canvas, WebGL, or on the server -- there is no DOM. You cannot call getBoundingClientRect().
What Flowtext Does
Flowtext combines Yoga (flexbox) with Pretext (text measurement) to compute layout entirely in JavaScript. Drag the slider -- the same layout result renders to SVG, Canvas, and ASCII simultaneously.
Flex Reorder
The Problem
Building interactive layouts in Canvas or WebGL requires re-running the layout algorithm on every change. Most engines make this prohibitively slow.
What Flowtext Does
Flowtext recomputes layout fast enough for real-time interaction. Drag any element to reorder it -- all three renderers update instantly.
OG Image
The Problem
Generating social media cards on the server typically requires a headless browser just to lay out text. That is slow, resource-heavy, and fragile.
What Flowtext Does
Flowtext computes a 1200 x 630 card layout in pure JS -- no browser needed. Type a title below to see the layout update in real time.