Pretext Deep Dive: A Pure-Arithmetic Text Layout Engine That Bypasses the DOM

Forum topic · 小凯 · 2026-04-30

Summary

Pretext is a 15KB, zero-dependency TypeScript library by Cheng Lou (former React core team member, creator of React Motion and ReScript, now at Midjourney) that measures multi-line text height and line breaks using pure arithmetic, without touching the DOM. Traditional text measurement via offsetHeight or getBoundingClientRect forces layout reflow—potentially 30ms per frame—which breaks 60fps in virtual lists, chat streams, and AI streaming UIs. Pretext splits the work into prepare() (one-time whitespace normalization, Unicode grapheme segmentation via Intl.Segmenter, Bidi handling, canvas.measureText) and layout() (a hot path of ~200ns per call, 300–600x faster than DOM measurement). Advanced APIs include layoutNextLine() for text wrapping around floating images, walkLineRanges() for shrink-wrap widths, and rich inline mixing. Cheng Lou developed it by feeding browser benchmark data to Claude Code and OpenAI Codex, testing against The Great Gatsby and multilingual corpora. The post went viral with 19M+ views and 45K GitHub stars, and a Swift port appeared within five days. Limitations include no vertical text, no automatic hyphenation, and macOS system-ui precision issues. Pretext's broader thesis: as LLMs generate UI, 'compute first, then render' becomes essential infrastructure for verification without a browser.

Overview

Pretext is a 15KB, zero-dependency pure TypeScript library by Cheng Lou — former React core team member, author of React Motion, founder of ReasonML/ReScript, now an engineer at Midjourney. It does something seemingly simple: precisely measure multi-line text height and line wrapping without touching the DOM. His launch post on X drew 22M views.

Key points

The problem: DOM measurement APIs (offsetHeight, getBoundingClientRect(), scrollHeight) force layout reflow — up to 30ms per frame, killing 60fps in virtual lists, masonry layouts, chat streams, and live dashboards. You cannot know text size before rendering.
The core idea: extract the browser engine's "measure and wrap" capability into a pure computational process developers can call directly.

Architecture: prepare() vs layout()

prepare() (one-time heavy work, ~19ms for 500 texts):
Whitespace normalization
Unicode grapheme segmentation via Intl.Segmenter (CJK, Arabic, Hebrew, Thai, emoji, mixed scripts)
Glue rules for per-script line-break permissions; Bidi logic (borrowed from pdf.js)
Canvas measureText() measurements, cached in an opaque handle
layout() (hot path, pure arithmetic, ~0.09ms for the same 500 texts, ~200ns per call):
Accumulates word widths left-to-right, wraps at maxWidth, returns height and line count
300–600x faster than DOM measurement

Hard problems solved

Grapheme clusters: emoji ZWJ sequences (👨‍👩‍👧‍👦 = 7 code points), combining marks, precomposed forms
Bidirectional text: embedding levels, overrides, isolates (based on pdf.js; seeded by Sebastian Markbage's decade-old text-layout project)
Per-language glue rules: English spaces, CJK inter-character breaks, Japanese keep-all behavior, Thai dictionary-less fallback via overflow-wrap: break-word
Cross-browser canvas measurement variance, validated pixel-perfect against Chrome/Safari/Firefox using The Great Gatsby and multilingual datasets
Soft hyphens () as invisible-until-selected break points

Advanced APIs

layoutNextLine(): per-line width control for text wrapping around floating/dynamic images — real-time at 60fps, unlike CSS shape-outside
walkLineRanges(): binary search over lines without string allocation — for shrink-wrap bubble widths and balanced text
Rich inline mixing (prepareRichInline): mixed fonts/weights, atomic break: 'never' chips, extraWidth for pill padding

AI-assisted development

Cheng Lou fed browser benchmark data to Claude Code and OpenAI Codex to iteratively test and optimize across Chrome, Safari, and Firefox — AI handled tedious empirical work while he defined the architecture and validated results. His thesis: LLMs lack "spatial vision"; Pretext serves as a verification layer so AI can "compute before drawing" without a browser.

Community reception

19M+ tweet views; GitHub stars grew from 18K in days to 45K+; Hacker News 314 points
Community demos: dragons flying through paragraphs with live rewrap, physics letter drops, multi-column flow around orbs
First non-JS port, swift-pretextkit, appeared 5 days after launch (Tornike Gomareli), replacing Canvas with Apple CoreText — 2x faster and 2x more energy-efficient than direct CoreText/TextKit/UILabel measurement

Limitations

Supports white-space: normal/pre-wrap, word-break: normal/keep-all, overflow-wrap: break-word, numeric letter-spacing
system-ui on macOS has precision issues; use explicit font names
No vertical text (issue #1), no font-optical-sizing/font-feature-settings/font-variation-settings, no automatic hyphenation
Requires Intl.Segmenter and Canvas 2D; horizontal measurement only

Conclusion

Pretext represents a paradigm shift from "render first, measure later" to "compute first, then render". It enables precise virtual lists, user-space masonry/flexbox, CLS prevention, Canvas/SVG/WebGL text control, and future server-side rendering. As LLMs increasingly generate UI, pure-arithmetic verification may become essential infrastructure.