Pretext

This article is wrapping around shapes you can drag. It is also about how that's possible. The two facts are the same fact.

Pretext is a new JavaScript library by Cheng Lou (Midjourney, formerly responsible for ReasonReact and a handful of other front-end primitives you've probably used without knowing it). It was making the rounds when I started this—press called it the “vibe-coded open-source standard for text” and that framing, fine, but it buried the lede. Pretext is not a typographic effects library. It is plumbing. It measures multiline text and tells you, with almost no ceremony, how tall a paragraph will be at a given width and exactly where the line breaks will land. It does this with canvas instead of the DOM, which is the trick. DOM-based measurement forces the browser to lay out the page; canvas measurement does not. So you can ask the question many times per second without setting anything on fire.

That sounds dry, and on its own it is. The cool stuff lives in what people build with it. The headline demo on Cheng's site has a magazine title that routes around an animated obstacle—text reflows line by line as the obstacle moves. There's a chat interface that virtualizes a hundred thousand messages by predicting their heights without rendering them. There's an editorial spread that pours columns through a piece of moving art. None of that is Pretext, exactly. Pretext is the thing that makes asking “how tall is this” cheap enough to ask continuously, which is what the cool stuff requires.

Once you grant yourself permission to ask that question every frame, the obvious next thing is text routing around the actual silhouette of an arbitrary shape. Not its bounding box. The points of the star, the cleft of the heart, the negative space inside a key. That is what the page you are reading is doing right now.

The trick, as plainly as I can put it: for every visual line of text—a horizontal band twenty-eight pixels tall—the engine asks which patches of horizontal space are blocked by a shape. It rasterizes each shape to an offscreen canvas, scans the alpha channel inside the band, and finds where the opaque pixels are. Subtract those patches from the page width and you have a list of available intervals: the gaps between obstacles. Hand each interval to Pretext, ask “how many words fit in this width starting from where I left off,” render that fragment, advance the cursor. Do this per line, all the way down the page. When a shape moves, you re-do it. Pretext is fast enough that you can afford to.

The hard part wasn't the measurement—Pretext makes that feel almost free. The hard part was the silhouette. A bounding box around a star is honest geometry and boring text: the words wrap in a tidy rectangle that pretends the points aren't there. Per-pixel silhouette is what makes the wrap read as actually-around-the-shape rather than around-a-rectangle-someone-drew-around-the-shape. So every shape gets rasterized to its own little canvas at its current rotation, and the layout engine looks at that mask—not at any bounding box—to decide where the words can go.

Drag a shape and the text re-flows live. Click a shape and it does whatever it does. The star spins. The others, you'll have to find out.

There is a second phase to this page that, by the time you read this, is either turned on or about to be. Down at the bottom there's an input that takes a prompt and asks Claude to draw an SVG. The drawing comes back as markup, becomes a shape, joins the page, and the text routes around it like all the others. The plumbing for that is wired; it lights up when an API key is on the server. In the meantime there are ten shapes hardcoded in—some simple, one or two clever—to give the engine something to chew on.

This article was written in parallel with the engine that lays it out. Sentences I added pushed shapes into new positions; shapes I added rewrote sentences. That was unexpectedly satisfying, and it is also why some of these lines feel a little too aware of where they are sitting. They are.

Try dragging the star.