pretext is a bigger deal than you think
TL;DR
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
Pretext
tap to reveal ↩
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
tap to reveal ↩
The traditional approach — insert text into DOM, call
getBoundingClientRect(), adjust — is slow and causes visual jitterCanvas text layout
tap to reveal ↩
Canvas has historically had no native line-wrapping; pretext solves this
Alternative view layers
tap to reveal ↩
The real use case — render measured text to Canvas, WebGL, React Native (Yoga), or server-side, not just the DOM
Virtualized / server rendering
tap to reveal ↩
Pre-knowing text dimensions before render reduces layout jank, especially in AI streaming UIs
CSS Houdini
tap to reveal ↩
A prior attempt to expose low-level layout hooks to JavaScript; partially succeeded, but didn't fully deliver
Text wrap balance / text wrap pretty
tap to reveal ↩
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-outsidefalls 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.