Text measurement without touching the DOM
Pretext is a pure TypeScript text layout library that bypasses browser layout reflow, computing text height and line breaks with pure math. 300-600x faster than DOM-based measurement, with full support for multilingual text, emoji, and bidirectional text — built for the Canvas / SVG / WebGL era.
“Text layout and measurement have always been the last and biggest bottleneck in unlocking more interesting UIs — especially in the AI era.”
Installation & Usage
import { prepare, layout } from '@chenglou/pretext';
// Step 1: Analyze font once (1-5ms, runs once)
const prepared = await prepare('Hello, 世界 🌍', '16px Inter');
// Step 2: Compute layout at any width (0.0002ms, call freely)
const { height, lineCount } = layout(prepared, 300);
console.log(height); // Exact pixel height
console.log(lineCount); // Number of lines
Pretext supports both ESM and CJS. Works in browsers, Node.js, and Web Workers.
Official Demos
View all →Accordion
↗Expand/collapse animations with Pretext computing text height in real time — no DOM reads
Editorial Engine
↗Animated spheres, live Pretext text reflow, pull quotes, and multi-column flow — zero DOM measurements
Dynamic Layout
↗Obstacle-aware text routing with Pretext — text flows continuously around arbitrary shapes at 60fps
Masonry
↗Text card waterfall layout with heights predicted by Pretext, not the DOM
Justification Comparison
↗CSS justify vs greedy line-breaking vs Knuth-Plass paragraph layout, side by side
Rich Text
↗Precise layout of inline code, links, chips, and other rich elements flowing with Pretext
Variable Typographic ASCII
↗Particle-driven ASCII art comparing proportional Pretext glyph measurement vs monospace
Bubbles
↗Compact multi-line message bubbles with Pretext auto-computing optimal width
Community Showcase
Creative demos that went viral on X / Twitter, showing what Pretext makes possible
The Web Is Interesting Again
@EsotericCofe"finally the web has become interesting again"
The Little Illuminated Dragon
@Riyvir"This little illuminated dragon is very happy about Pretext."
The Most Magical Time of My Life
@reathchris"i am in the most magical time of my life"
Text Layout of My Dreams
@rauchg"I can finally ship the text layout of my dreams"
Fluid Interfaces FTW
@vamsibatchuk"this is gold. fluid interfaces ftw."
Your Physics Textbook Is Not Boring Anymore
@stevibe"your physics textbook is not boring anymore"
Craaazy Water Ripple Effect
@dushankas"craaazy"
Let’s Go! Play Pretext Breaker
@singular_prism"Lets go! Play pretext breaker 🎮"
Why Pretext?
Every call to getBoundingClientRect() or offsetHeight forces the browser to pause all JavaScript execution and recalculate the entire page's geometry before returning a number. For a page with 500 text blocks, DOM-based measurement takes 15–30ms and triggers 500 layout reflows. Pretext completes the same task in 0.05ms with zero reflows — a 300-600x improvement.
Traditional approach
Create invisible DOM element → apply CSS → insert into document → call getBoundingClientRect() → remove element. Every measurement forces a full page layout reflow. 500 text blocks = 500 reflows.
Pretext approach
prepare() uses Canvas measureText to analyze font metrics once and cache them. Every layout() call after that is pure arithmetic — no DOM access, no reflow, callable from anywhere including Web Workers and the server.
Virtual Scrolling
Prevent Layout Shift
Canvas / WebGL Rendering
Masonry Layouts
Obstacle-aware Text Flow
SVG / Server-side Rendering
How It Works
A two-phase Pretext design that separates expensive measurement from cheap computation
prepare() — One-time font analysis
Pretext first normalizes whitespace per CSS spec, then uses the browser's built-in Intl.Segmenter for Unicode segmentation — correctly handling CJK per-character line breaks, spaceless Thai, Arabic RTL scripts, and emoji sequences. Segmented units are then measured via Canvas measureText and cached by (segment, font) key. The entire prepare() phase takes 1–5ms and runs just once.
layout() — Pure arithmetic
With cached font metrics, every Pretext layout() call is pure math: walk through cached segment widths, accumulate until maxWidth is reached, break to a new line. Handles the CSS edge case where trailing spaces extend past the line width without causing reflowing. Each call takes ~0.0002ms — safe to invoke every animation frame.
Safari emoji calibration
Safari's Canvas API reports emoji widths that differ from actual DOM rendering. When Pretext first encounters emoji for a given font, it performs one hidden DOM measurement to establish a correction factor, caches it, and applies it to all subsequent emoji measurements — ensuring pixel-perfect accuracy across all browsers.
Built-in verification
Pretext includes a verification system that creates hidden DOM elements and compares their actual rendered height against Pretext's calculated values. This side-by-side comparison is what backs Pretext's accuracy claims and lets developers validate results in debug mode.
Supported Text Types
CJK (Chinese / Japanese / Korean)
Emoji
Bidirectional text (BiDi)
Spaceless scripts
Soft hyphens
Rich inline elements
Comparison with Alternatives
Pretext isn't the only text measurement approach, but it leads in the combination of speed, accuracy, and language support
DOM measurement
Raw Canvas.measureText
HarfBuzz (WASM)
Pretext
About the Author
Cheng Lou
Former React core team member, co-creator of ReasonML (now Melange), and current frontend engineer at Midjourney. The development of Pretext itself is notable: Cheng Lou provided browser rendering benchmarks to AI coding assistants like Claude Code and Codex, which then iteratively tested and optimized the implementation across key container widths over several weeks. After validating Pretext's reliability in Midjourney's production environment, he open-sourced it.
Community Reception
After launching in March 2026, Pretext sparked immediate discussion across the frontend community
“Text layout and measurement have always been the last and biggest bottleneck in unlocking more interesting UIs — especially in the AI era.”
“Pretext solves the long-standing problem of calculating line-wrapped text height outside the DOM.”
“This isn't a flashy demo — it's foundational infrastructure for replacing CSS-based layout. A real UI paradigm shift.”
Known Limitations
Pretext isn't a silver bullet — understand these boundaries before adopting it