Open-Source AI

Pretext Bypasses the DOM for Text Layout, and the Internet Lost Its Mind

A Midjourney engineer's 15KB library does text measurement with pure math. The benchmarks are wild.

Oliver Senti
Oliver SentiSenior AI Editor
March 30, 20266 min read
Share:
Abstract visualization of text flowing around geometric shapes, rendered at high speed with visible mathematical grid lines and measurement markers

Cheng Lou dropped Pretext on March 28th, and within 48 hours the repo had north of 13,000 GitHub stars. The pitch: a pure TypeScript library that measures and lays out multiline text without ever touching the DOM. No getBoundingClientRect(). No offsetHeight. No browser reflow. Just math.

If you've been anywhere near X or Hacker News this weekend, you've already seen the demos. Text flowing around animated dragon shapes at 60fps. Chat bubbles that shrinkwrap to the exact pixel width of their content. Magazine-style multi-column layouts reflowing in real time. It looks like print design finally made it to the browser, thirty years late.

How it actually works

The trick is splitting text layout into two phases. The prepare() function does the expensive work once: it segments the text (handling CJK characters, emoji, Arabic, bidi, soft hyphens), measures each segment using the Canvas measureText() API, and caches the results. For 500 text blocks, this takes around 19 milliseconds. Not free, but it only runs once.

Then layout() takes over. This is the hot path, the part that runs on every resize, every animation frame, every time text changes. And because it's working from cached width values, doing pure arithmetic to figure out line breaks and heights, it completes in about 0.09 milliseconds for those same 500 blocks. Lou himself calls the resulting ~500x speedup comparison "unfair," which is refreshingly honest for a project launch. The comparison pits a cached computation path against a full DOM measurement cold path. But even granting that caveat, the gap is real enough to enable things browsers simply can't do at interactive framerates.

The idea isn't new. Lou credits Sebastian Markbage's text-layout project from roughly a decade ago as the seed. What's new is the execution: full internationalization support validated against public domain corpora in Thai, Chinese, Korean, Japanese, and Arabic. Simon Willison, co-creator of Django, noted on his blog that the testing approach is particularly impressive, with earlier versions running the full text of The Great Gatsby through multiple browsers to verify measurement accuracy.

The "just a wrapper" critique

Not everyone's impressed. Domenic Denicola, a well-known web standards contributor, pushed back on X, calling Pretext "just a wrapper around the canvas element's existing measureText() function" and arguing that canvas-based text measurement has existed for years. He's not wrong about the underlying API. But that's a bit like saying React is just a wrapper around document.createElement(). The value isn't in the individual API call; it's in the system built around it.

What Lou built is a line-breaking algorithm that matches browser behavior across Chrome, Safari, and Firefox. It handles kinsoku shori rules for CJK text, merges Arabic punctuation clusters correctly, and includes an emoji width correction for a Chrome/Firefox rendering quirk on macOS where Canvas measures emoji wider than the DOM at small font sizes. That's not trivial wrapping.

The Hacker News thread surfaced more practical concerns. The demo page itself had rendering issues at launch: text getting cut off by overflow: hidden, mobile completely broken on several devices. For a project whose whole selling point is pixel-perfect text layout, that's an awkward first impression.

Where does this matter?

Look, the vast majority of websites don't need this. Your blog, your landing page, your e-commerce store: CSS handles text layout fine. The browser reflow cost is negligible when you're laying out a handful of static paragraphs.

But chat apps virtualizing thousands of message bubbles? There's a problem. Each bubble needs its height calculated before it can be positioned in a virtual scroll list. Do that via DOM measurement and you're forcing synchronous reflow for every single bubble. Pretext lets you compute all those heights from cached data without touching the layout engine.

The shrinkwrap demo is genuinely compelling. CSS width: fit-content sizes a bubble to its widest wrapped line, leaving dead space when the last line is short. There's no CSS property that says "find the narrowest width that produces exactly three lines." Pretext's walkLineRanges() does exactly that, binary-searching for the tightest width with zero DOM reads. I've built chat interfaces. That dead-space problem is real and annoying.

The AI angle

Lou explicitly designed the API to be "AI-friendly," encouraging developers to point their coding assistants at it. And the narrative around Pretext keeps circling back to agent-driven interfaces, where UI isn't designed by humans in advance but assembled dynamically by systems that respond to user intent in real time.

In that scenario, every layout update triggered by an agent's output change hits the browser's reflow pipeline. If the agent is updating the interface on every step (and some do), those reflows compound. Pretext makes the layout computation predictable and fast enough to keep up.

It is a tidy story. Maybe too tidy. The connection between "fast text layout" and "agent interfaces" isn't quite as straightforward as the marketing implies. Most agent UI jank comes from network latency and LLM token streaming, not from the browser struggling to lay out a few paragraphs. But for the subset of agent tools that generate complex, multi-element interfaces on the fly, the argument holds up.

The gap CSS never closed

Here's what surprised me while digging into this. CSS Exclusions and CSS Regions, two specs that would have given browsers native support for text flowing around shapes and across containers, have existed as specifications for years. Browser vendors just never shipped them. The specs are there. The implementations aren't.

So when people look at Pretext's editorial layout demos and say "CSS can already do this," they're technically right about the spec and wrong about reality. And that gap, between what CSS could theoretically do and what it actually does in shipping browsers, is exactly the space Pretext occupies.

Whether that gap stays open is the real question. If Pretext gets enough traction, it might actually reduce the pressure on browser vendors to implement those specs. Why bother with CSS Regions when there's a 15KB library that solves it? That outcome would be a strange kind of success.

What's missing

Server-side rendering isn't there yet. Lou lists it on the roadmap, but right now Pretext is browser-only. The system-ui font causes measurement mismatches on macOS because Canvas resolves it to different optical variants than the DOM does. You need named fonts (Inter, Helvetica, whatever) for accuracy. And very narrow containers can break words at unexpected points.

These are early-stage limitations, not deal-breakers. But they matter if you're considering adopting this for production today. The library is days old.

Shopify CEO Tobi Lutke was among the early signal-boosters on X, and the community response has been fast. Developers are already building resume builders that always fit on one page, handwriting-animated streaming text, and ASCII DOOM renderers powered by Pretext glyph math. The energy around the project is real. Whether it translates into production adoption beyond demos and hackathon projects is a different question, and one that won't have an answer for months.

Tags:pretexttext-layoutjavascripttypescriptweb-performancecssopen-sourcemidjourneydombrowser-rendering
Oliver Senti

Oliver Senti

Senior AI Editor

Former software engineer turned tech writer, Oliver has spent the last five years tracking the AI landscape. He brings a practitioner's eye to the hype cycles and genuine innovations defining the field, helping readers separate signal from noise.

Related Articles

Stay Ahead of the AI Curve

Get the latest AI news, reviews, and deals delivered straight to your inbox. Join 100,000+ AI enthusiasts.

By subscribing, you agree to our Privacy Policy. Unsubscribe anytime.

Pretext: Text Layout Without CSS or DOM Reflow | aiHola