⌘K
Change language Switch ThemeSign In
Narrow Mode
Pretext
S Simon Willison's Weblog @Simon Willison
One Sentence Summary
Pretext is a high-performance browser library by Cheng Lou that calculates text layout and height without DOM interaction by emulating browser word-wrapping logic.
Summary
Simon Willison introduces Pretext, a specialized browser library developed by former React core developer Cheng Lou. The library addresses the performance bottleneck of measuring text dimensions, which traditionally requires expensive DOM rendering. Pretext achieves high performance by separating the process into two phases: a 'prepare' function that measures text segments using an off-screen canvas and caches the results, and a 'layout' function that emulates browser word-wrapping logic to calculate height at any given width. The library is notable for its rigorous testing against massive multi-language corpora, ensuring accuracy across various scripts and edge cases.
Main Points
* 1. Pretext enables DOM-less text height calculation.By avoiding the expensive process of rendering and measuring in the DOM, it allows for much faster layout calculations and enables complex text effects. * 2. The architecture separates preparation from layout for efficiency.The prepare() function handles expensive one-time measurements using an off-screen canvas, while layout() performs fast, iterative wrapping simulations based on cached data. * 3. It features robust multi-language support and validation.The library has been validated against massive texts like The Great Gatsby and various non-Latin corpora (Thai, Chinese, Arabic, etc.) to ensure wrapping accuracy.
Metadata
AI Score
87
Website simonwillison.net
Published At Today
Length 293 words (about 2 min)
Sign in to use highlight and note-taking features for a better reading experience. Sign in now
29th March 2026 - Link Blog Pretext (via) Exciting new browser library from Cheng Lou, previously a React core developer and the original creator of the react-motion animation library.
Pretext solves the problem of calculating the height of a paragraph of line-wrapped text _without touching the DOM_. The usual way of doing this is to render the text and measure its dimensions, but this is extremely expensive. Pretext uses an array of clever tricks to make this much, much faster, which enables all sorts of new text rendering effects in browser applications.
Here's one demo that shows the kind of things this makes possible:
The key to how this works is the way it separates calculations into a call to a prepare() function followed by multiple calls to layout().
The prepare() function splits the input text into segments (effectively words, but it can take things like soft hyphens and non-latin character sequences and emoji into account as well) and measures those using an off-screen canvas, then caches the results. This is comparatively expensive but only runs once.
The layout() function can then emulate the word-wrapping logic in browsers to figure out how many wrapped lines the text will occupy at a specified width and measure the overall height.
I had Claude build me this interactive artifact to help me visually understand what's going on, based on a simplified version of Pretext itself.
The way this is tested is particularly impressive. The earlier tests rendered a full copy of the Great Gatsby in multiple browsers to confirm that the estimated measurements were correct against a large volume of text. This was later joined by the corpora/ folder using the same technique against lengthy public domain documents in Thai, Chinese, Korean, Japanese, Arabic, and more.
S Simon Willison's Weblog @Simon Willison
One Sentence Summary
Pretext is a high-performance browser library by Cheng Lou that calculates text layout and height without DOM interaction by emulating browser word-wrapping logic.
Summary
Simon Willison introduces Pretext, a specialized browser library developed by former React core developer Cheng Lou. The library addresses the performance bottleneck of measuring text dimensions, which traditionally requires expensive DOM rendering. Pretext achieves high performance by separating the process into two phases: a 'prepare' function that measures text segments using an off-screen canvas and caches the results, and a 'layout' function that emulates browser word-wrapping logic to calculate height at any given width. The library is notable for its rigorous testing against massive multi-language corpora, ensuring accuracy across various scripts and edge cases.
Main Points
* 1. Pretext enables DOM-less text height calculation.
By avoiding the expensive process of rendering and measuring in the DOM, it allows for much faster layout calculations and enables complex text effects.
* 2. The architecture separates preparation from layout for efficiency.
The prepare() function handles expensive one-time measurements using an off-screen canvas, while layout() performs fast, iterative wrapping simulations based on cached data.
* 3. It features robust multi-language support and validation.
The library has been validated against massive texts like The Great Gatsby and various non-Latin corpora (Thai, Chinese, Arabic, etc.) to ensure wrapping accuracy.
Key Quotes
* Pretext solves the problem of calculating the height of a paragraph of line-wrapped text without touching the DOM. * The key to how this works is the way it separates calculations into a call to a prepare() function followed by multiple calls to layout(). * The layout() function can then emulate the word-wrapping logic in browsers to figure out how many wrapped lines the text will occupy at a specified width.
AI Score
87
Website simonwillison.net
Published At Today
Length 293 words (about 2 min)
Tags
Browser Performance
Text Layout
Frontend Engineering
JavaScript Library
DOM Optimization
Related Articles
* 2025: The year in LLMs * Wilson Lin on FastRender: a browser built by thousands of parallel agents * First impressions of Claude Cowork， Anthropic’s general agent * GPT-5.4 mini and GPT-5.4 nano: 76,000 Photos for $52 * My fireside chat about agentic engineering at the Pragmatic Summit HomeArticlesPodcastsVideosTweets