About the Creator
Chenglou Pretext
The story behind Pretext.js — a pure JavaScript text measurement engine created by chenglou (Cheng Lou) that is 600× faster than DOM measurement.
The Creator
Who Is Chenglou? The Mind Behind Pretext
For over three decades, web developers accepted a fundamental constraint: to know how tall a block of text will be, you must render it in the DOM and ask the browser. This forces synchronous layout reflow — a bottleneck that costs 30ms or more per frame when hundreds of text elements are visible. Chenglou Pretext is the library that finally breaks this cycle, replacing DOM measurement with pure arithmetic that runs 600 times faster.
Background
The engineer behind Chenglou Pretext — universally known by his GitHub handle chenglou — is one of the most influential developers in the JavaScript ecosystem. He served on the React core team at Facebook, created react-motion (21,000+ GitHub stars), and led the development of ReasonML and ReScript.
Current Work
Today, chenglou works at Midjourney, where ~5 engineers serve millions of users with a UI built on Bun and vanilla React. Streaming AI tokens triggered continuous text reflows — the bottleneck that motivated Chenglou Pretext.
Philosophy
Chenglou's signature approach: identify a constraint everyone accepts as given, then build a userland solution that sidesteps it entirely. With Chenglou Pretext, he rejected the premise that the browser must own text measurement.
Connect
Follow chenglou on X (formerly Twitter) at @_chenglou for insights on performance engineering, language design, and the future of Chenglou Pretext. Source code lives at github.com/chenglou/pretext.
Architecture
How Chenglou Pretext Works
The core insight of the Cheng Lou Pretext architecture is splitting text measurement into two distinct phases.
prepare()
Runs once per text+font pair. Segments input using Intl.Segmenter for Unicode-aware word boundaries, measures each segment via Canvas measureText(), and caches the results. Takes 0.1–1ms.
layout()
Where the Cheng Lou Pretext engine truly shines. Walks cached segment widths, tracks a running total, and inserts breaks when width is exceeded. No DOM, no reflow. Takes ~0.0002ms — fast enough for thousands of calls per frame.
import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('Your text', '16px Inter') const { height, lineCount } = layout(prepared, 400, 24)
The prepared handle is reusable. Compute heights for mobile, tablet, and desktop from the same handle in three arithmetic operations. This reusability is what makes the Chenglou Pretext approach ideal for responsive layouts, virtual scrolling, and real-time text reflow.
Reference
Chenglou Pretext API
The Pretext chenglou API is small and focused. Every function falls into one of two phases: preparation (measure once) or layout (pure arithmetic, call as many times as needed).
| Function | Phase | Purpose |
|---|---|---|
| prepare(text, font) | Prepare | Segment and measure text. Returns opaque handle. |
| prepareWithSegments(text, font) | Prepare | Like prepare(), exposes segment data for advanced use. |
| layout(prepared, width, lineHeight) | Layout | Compute line count and total height. Pure arithmetic. |
| layoutWithLines(prepared, width, lineHeight) | Layout | Returns each line's text and width. |
| layoutNextLine(prepared, cursor, width) | Layout | One line at a time, variable width per line. |
| walkLineRanges(prepared, width, cb) | Layout | Iterate line boundaries without building strings. |
| clearCache() | Utility | Clear internal glyph-width caches. |
Applications
Why Chenglou Built Pretext
The Pretext chenglou library was born from real production needs at Midjourney. Here are the scenarios where Chenglou Pretext delivers the greatest impact.
Virtual Scrolling
Pre-compute heights for thousands of variable-height items without DOM elements. Chenglou Pretext works with React Virtuoso, TanStack Virtual, and any virtualization library.
Chat & AI Streaming
The original motivation behind Chenglou Pretext. Predict bubble heights before streaming AI responses finish. Eliminate layout shift during real-time token delivery.
Dashboards & Tables
Size tooltips, cells, and cards without forced reflow. Chenglou Pretext keeps rendering at 60fps even with hundreds of simultaneous text updates.
Responsive Layouts
Compute text heights at multiple breakpoints from a single prepare() call. Mobile, tablet, desktop — three arithmetic operations, zero reflows.
Creative Typography
Build editorial layouts with text flowing around obstacles or ASCII art. Chenglou Pretext gives per-line control that CSS alone cannot achieve.
Multilingual Content
CJK, Arabic, Hebrew, Thai, Korean, and mixed-script text — same API. The Pretext chenglou library handles Unicode segmentation and bidi automatically.
Benchmarks
Chenglou Pretext vs DOM Measurement
How does the Chenglou Pretext approach compare to traditional DOM-based text measurement? Traditional methods require creating hidden DOM elements, applying styles, appending to the document, reading computed dimensions, and removing — all of which trigger expensive synchronous reflow. The Chenglou Pretext engine bypasses this entirely with cached glyph arithmetic.
| Aspect | DOM Measurement | Chenglou Pretext |
|---|---|---|
| Speed | ~0.06ms (forces reflow) | ~0.0002ms (pure arithmetic) |
| Layout Thrashing | Yes — DOM read/write interleaving | None — zero DOM access |
| SSR / Workers | Impossible (no DOM) | Full support via Canvas polyfill |
| i18n & Bidi | Depends on browser | Built-in Unicode + bidi |
| API | Create → style → append → measure → remove | prepare() → layout() |
Track Record
Chenglou's Open Source Legacy
Rejected CSS timing functions for physics-based springs. Chenglou redefined how React handles animation.
Rejected JavaScript's loose types for OCaml-grade safety. Brought ML-family type systems to the web.
Rejected the premise that the browser must own text measurement. 600× faster, zero DOM access.
Each project earned widespread adoption because the alternative was not just faster or safer — it was a fundamentally better model. The Chenglou Pretext approach to open source continues to inspire developers who challenge assumptions rather than work around them. Today, the Chenglou Pretext library stands as the definitive solution for DOM-free text measurement on the web.
Get Started with Chenglou Pretext
Install the Pretext chenglou package, call two functions, and never touch the DOM for text measurement again. Chenglou Pretext works with React, Vue, Svelte, or vanilla JavaScript — it is framework-agnostic with no dependencies. Import prepare() and layout(), measure once, then compute heights at any container width in microseconds.
$ npm install @chenglou/pretextChenglou Pretext is MIT-licensed, has zero dependencies, and weighs approximately 15KB — a minimal footprint for a library that can transform how your application handles text. For questions, bug reports, or contributions, visit the official chenglou/pretext repository.