pretext / text layout

On March 27, 2026, Cheng Lou — a veteran engineer known for work on React, ReScript and Midjourney — released Pretext, an MIT-licensed, 15KB TypeScript library built with AI coding tools (OpenAI Codex, Anthropic Claude) that measures and lays out multiline text in userland without relying on the DOM. Pretext bypasses costly browser layout reflow, enabling text to dynamically wrap, respond to interactions, and retain letter/word/line order while other elements move or resize. Early demos show extreme interactive effects (animated dragons, tipping-phone physics, simultaneous movie-and-book renderings); critics note legibility issues, but developers are already prototyping practical features like dyslexia-friendly spacing and font resizers. If adopted, Pretext could change how web interfaces handle text performance and interactivity.

New browser library Pretext, from Cheng Lou (ex-React core dev and creator of react-motion), estimates paragraph heights without touching the DOM, enabling much faster text layout and novel rendering effects. Pretext separates work into a prepare() step that tokenizes text (handling words, soft hyphens, emoji, CJK scripts, etc.) and measures segments on an off-screen canvas once, and a fast layout() step that emulates browser word-wrapping to compute line breaks and height for different widths. The approach reduces expensive DOM measurements, supports many languages, and is validated by tests that compared estimates across full texts (e.g., The Great Gatsby) and large multilingual corpora. This can speed up complex UI text rendering and animation.

Simon Willison highlights Pretext, a new browser library by Cheng Lou (former React core dev and author of react-motion) that computes line-wrapped paragraph heights without touching the DOM. Pretext separates work into a one-time prepare() step that segments text (handling words, soft hyphens, emoji, and non-Latin scripts) and measures them via an off-screen canvas, and a fast layout() step that emulates browser word-wrapping to estimate wrapped lines and total height at given widths. The approach avoids expensive DOM rendering, enabling richer text-rendering effects in web apps. Validation included rendering large multilingual corpora (e.g., The Great Gatsby and public-domain texts in Thai, Chinese, Japanese, Arabic) across browsers to verify accuracy.

A new TypeScript library called Pretext, by Cheng Lou, provides multiline text measurement and layout utilities for web developers. Published with demos and a GitHub repo, Pretext aims to improve how text is measured and laid out across lines—addressing a common frontend challenge for complex typography, responsive UIs, and custom text rendering. The Hacker News thread highlights the concise demo tweets as an effective showcase of why improving foundational layout tooling can have broad impact on application architecture and platform capabilities. This matters to frontend engineers, UI library authors, and designers because more accurate and performant text layout simplifies building consistent, accessible interfaces across browsers and devices.