pretext is a bigger deal than you think
Pretext is a new JavaScript library by Cheng Lou (React core contributor, Midjourney engineer) that re-implements browser text layout in JavaScript using HTML Canvas — without touching the DOM. Its real value isn't novelty text effects; it's enabling precise, fast text measurement for alternative rendering targets like Canvas, WebGL, React Native, and server-side rendering. ---
Key Concepts
| Concept | Definition |
|---|---|
| Pretext | Library that pre-calculates word dimensions and implements a layout engine to replicate browser text wrapping, entirely in JavaScript via Canvas |
| Text measurement via DOM | The traditional approach — insert text into DOM, call `getBoundingClientRect()`, adjust — is slow and causes visual jitter |
| Canvas text layout | Canvas has historically had no native line-wrapping; pretext solves this |
| Alternative view layers | The real use case — render measured text to Canvas, WebGL, React Native (Yoga), or server-side, not just the DOM |
| Virtualized / server rendering | Pre-knowing text dimensions before render reduces layout jank, especially in AI streaming UIs |
| CSS Houdini | A prior attempt to expose low-level layout hooks to JavaScript; partially succeeded, but didn't fully deliver |
| Text wrap balance / text wrap pretty | New CSS-native features that address some of the same problems pretext solves |
Notes
What Pretext Actually Does
- Measures the width and height of every word in a given text block using HTML Canvas (not the DOM)
- Caches measurements — e.g., entire Bee Movie script measured in ~44ms
- Runs a layout algorithm to determine line breaks for a given container width
- Returns a layout result: every line, every word, with precise width/height data
- Consumer decides what to do with that data (DOM, Canvas, WebGL, etc.)
Why DOM-Based Measurement Falls Short
- Classic approach (e.g., fit-text): set font size → measure with `getBoundingClientRect()` → increment/decrement → repeat
- Causes visible jitter even when fast
- Completely unusable for real-time or non-DOM rendering targets
Real Use Cases (Not the Silly Demos)
- **Canvas rendering**: Line wrapping in Canvas has always been hard — pretext makes it trivial
- **WebGL**: Same benefit as Canvas
- **React Native / Yoga**: Pretext has already been adapted to work with Yoga (RN's CSS re-implementation)
- **Car infotainment screens**: Non-browser UI targets with JS logic layers
- **Server-side rendering**: Pre-measure text on server before streaming to client
- **AI streaming UIs**: Reduces jumpiness when text streams in by knowing approximate layout ahead of time
- **Balanced multi-column layouts**: Splitting text evenly across columns is a concrete, practical use case
Why Cheng Lou (Midjourney) Built This
- Midjourney had no UI for ~4 years; now signaling hardware and "TBA software"
- Likely building a Figma competitor (AI-driven design tool)
- New wave of "Figma killers" (e.g., Paper, Pencil) all render in HTML/CSS
- Easier design-to-code export
- Easier import of existing websites
- AI is very good at generating HTML/CSS/JS
- Pretext would be a core primitive for a design tool needing pixel-perfect text layout
Speculative: A Full Canvas UI Layer?
- Possibility: Cheng Lou may be building an entirely new UI layer rendered to Canvas (no DOM at all)
- Pretext would be the foundational primitive — text wrapping first, then layouts, cards, GUIs
- Analogous to a "Swift UI for the web" rendered entirely in Canvas
- Described as a huge undertaking, but increasingly feasible with AI-assisted development
How It Was Built (AI-Assisted Development)
- Browser text wrapping is "edge cases all the way down" — mixed scripts, emojis, weird wrapping rules
- Previously too painful for anyone to attempt as a library
- Cheng Lou used AI to iterate through every browser at every pixel width, checking for edge-case failures
- AI made the soul-crushing exhaustive testing tractable
Will It Replace CSS?
- No — CSS continues to gain native features: `text-wrap: balance`, `text-wrap: pretty`, box-trim
- Pretext is for lower-level, highly custom, or non-browser rendering scenarios
- Historical parallel: CSS Houdini was meant to expose layout hooks to JS but didn't fully materialize — some ideas eventually landed in CSS natively
- Likely path: if pretext use cases prove widespread, they get standardized into CSS/browser engines
- Browser layout engines already know word sizes internally — surfacing that info natively would be even faster than pretext
Actionable Takeaways
- Reach for pretext when rendering text to **Canvas, WebGL, or non-DOM targets** — not as a CSS replacement
- Use pretext for **balanced multi-column text layouts** where CSS `shape-outside` falls short
- Consider pretext for **AI streaming UIs** to reduce layout jank during token-by-token rendering
- Watch Midjourney's upcoming software announcements — pretext likely signals a larger product play
- Don't dismiss a library because its demo use cases look trivial — evaluate the underlying primitive
Quotes Worth Keeping
Text wrapping in browser rendering is edge cases all the way down — which is why nobody has ever built a library like this before.
You know what's even faster at knowing how big the text is going to be? The browser layout engines already know how big these words are.
Will this replace CSS? Not a chance.