PRETEXT.JS

Pretext.js is a pure JavaScript/TypeScript text layout engine that measures and positions multiline text entirely through arithmetic — never touching the DOM — achieving 600× faster performance than traditional getBoundingClientRect calls.

What is Pretext.js?

Pretext.js is a pure JavaScript/TypeScript text measurement and layout engine created by Cheng Lou (chenglou), a former React core team member now at Midjourney. It takes a string of text and a font specification, measures every word once via Canvas and Intl.Segmenter, then computes line breaks and heights using pure arithmetic — outputting exact pixel heights and line counts without any DOM access. The library runs in any modern browser and is framework-agnostic, weighing approximately 15KB with zero runtime dependencies. It is MIT-licensed and available on npm as @chenglou/pretext.

Key Features

• Zero DOM reads — The layout() function performs no getBoundingClientRect calls, no reflow, and no layout thrashing. After preparation, all computation is arithmetic.
• Real font metrics — Glyph widths are measured using the browser's own Canvas measureText() API, matching what the browser would actually render.
• Multilingual support — Fully supports CJK, Arabic, Hebrew, Thai, Hindi, Korean, and bidirectional text via Unicode segmentation and Intl.Segmenter.
• TypeScript-native — Written in TypeScript with precise types for every function; no additional @types packages needed.
• Reusable prepared handles — One prepare() call works for any container width; compute heights for mobile, tablet, desktop from the same handle.
• Zero runtime dependencies — No external packages or polyfills; relies only on standard browser APIs.
• 600× faster than DOM — Lays out 1,000 blocks in approximately 2 milliseconds, compared to ~94 ms with forced synchronous reflow.

Who is it for?

• Performance-sensitive web developers building virtual scrolling lists, code editors, or chat interfaces where measuring thousands of text items per frame would otherwise cause dropped frames.
• UI framework authors integrating text measurement into reactive libraries (React, Vue, Svelte) to avoid layout shift during streaming or resizing.
• Internationalization engineers working with multilingual content mixing scripts like CJK, Arabic, and Latin in a single view, requiring accurate per-script line breaking.
• Creative developers building text animations, fluid simulations, or interactive typography where real-time reflow around obstacles is needed — like the editorial engine demo with draggable orbs.

What can you do with Pretext.js?

• Build variable-height virtual scrollers: Render 10,000 items with text heights calculated without DOM reads, maintaining 60fps scrolling on any device. View example →
• Eliminate layout shift in AI chat bubbles: Pre-compute bubble heights for streaming AI responses before they finish rendering, preventing jumpiness. View example →
• Handle multilingual content feeds: Display a social feed mixing Chinese, Arabic, Korean, and Latin text in a single virtualized list with accurate measurements for each script. View example →
• Create interactive text animations: Use the editorial engine demo to flow text around draggable obstacles in real time, something CSS Shapes cannot do. Open Playground →
• Play the Pretext Breaker game: A Breakout-style arcade game where every pixel is rendered with text, powered by Pretext.js. Play the Game →

How does Pretext.js work?

1. Segment the text: Normalize whitespace, apply Unicode line-break rules, and split the string into measurable units using the browser's text segmentation via Intl.Segmenter.
2. Measure with Canvas: Feed each segment through Canvas measureText() to get real glyph advance widths from the font engine. Results are cached in a prepared handle.
3. Layout with pure arithmetic: Given a container width, compute line breaks by summing segment widths. Multiply line count by line-height to return height. No DOM access occurs during layout.

FAQ

Is Pretext.js free?

Yes, Pretext.js is MIT-licensed and free for any use — personal, commercial, or open source.

Does Pretext.js support my language?

Pretext.js supports 12+ writing systems including CJK, Arabic, Hebrew, Thai, Hindi, Korean, and Latin-based scripts. It uses Unicode segmentation and Intl.Segmenter for correct bidirectional text handling.

How does Pretext.js compare to traditional DOM measurement?

Pretext.js is approximately 600× faster. A 1,000-item layout using DOM getBoundingClientRect takes roughly 94 ms (6 dropped frames at 60fps), while Pretext.js completes in about 2 ms — all without forced synchronous reflow.

Can I use Pretext.js with React or other frameworks?

Yes, Pretext.js is framework-agnostic. It works with React, Vue, Svelte, or vanilla JavaScript. The library provides only prepare() and layout() functions that return plain values, so integration is straightforward.