Pretext: The Tiny JS Library That Measures Text Height Without Touching the DOM

Q: What Pretext Does

Pretext calculates the height of multi-line wrapped text entirely outside the DOM. The traditional approach — render text, measure dimensions, repeat — is expensive and causes layout thrashing. Pretext eliminates this by splitting the process into two phases: prepare(): Splits text into segments (words, emoji, non-latin characters), measures them on an off-screen canvas, and caches the results. Runs once. layout(): Emulates browser word-wrapping logic to calculate how many lines text will occupy at any given width. Runs as many times as needed, nearly instantly. The result: dynamic text layouts that were previously impossible or prohibitively expensive become trivially fast.

Q: Who Made This

Cheng Lou isn’t a random developer. He was a React core team member and created react-motion, one of the most influential animation libraries in the React ecosystem. Pretext represents the kind of deep browser expertise that’s increasingly rare in an era of framework abstractions.

By Jaspal March 31, 2026 Updated: March 31, 2026

If you’ve ever tried to calculate the height of wrapped text in a browser, you know the pain. You render it, measure it, and pray. Pretext, a new JavaScript library from ex-React core developer Cheng Lou, just solved this problem — without touching the DOM at all.

What Pretext Does

Pretext calculates the height of multi-line wrapped text entirely outside the DOM. The traditional approach — render text, measure dimensions, repeat — is expensive and causes layout thrashing. Pretext eliminates this by splitting the process into two phases:

prepare(): Splits text into segments (words, emoji, non-latin characters), measures them on an off-screen canvas, and caches the results. Runs once.

layout(): Emulates browser word-wrapping logic to calculate how many lines text will occupy at any given width. Runs as many times as needed, nearly instantly.

The result: dynamic text layouts that were previously impossible or prohibitively expensive become trivially fast.

Built With AI, Tested Against Literature

Cheng Lou built Pretext using Claude Code and Codex, iterating against browser ground truth over weeks. The testing is particularly impressive: the library was validated against the full text of The Great Gatsby across multiple browsers, then expanded to public domain documents in Thai, Chinese, Korean, Japanese, and Arabic.

The engine is just a few kilobytes, handles browser quirks, and supports platform-specific emoji.

Who Made This

Cheng Lou isn’t a random developer. He was a React core team member and created react-motion, one of the most influential animation libraries in the React ecosystem. Pretext represents the kind of deep browser expertise that’s increasingly rare in an era of framework abstractions.

The Bottom Line

Pretext is one of those libraries that makes you wonder why this didn’t exist before. For anyone building text-heavy web applications — editors, document viewers, design tools, or chat interfaces — the ability to pre-calculate text dimensions without the DOM is a genuine game-changer. Sometimes the most impressive engineering is the kind that makes a hard problem disappear entirely.