What is Pretext? The JavaScript Library That's 500x Faster Than DOM Layout

If you've spent any time on Hacker News or the JavaScript community in early 2026, you've probably seen something unusual: a dragon swimming through text, words parting like water, breakout bricks made entirely of letters. That's Pretext — and it's much more than a visual trick.

The Problem With Text Layout on the Web

Browsers are remarkably capable at rendering text. The problem is measuring it. Every time you call getBoundingClientRect(), offsetHeight, or similar DOM APIs to measure text dimensions, you force the browser to perform a layout reflow — a full recalculation of the document's geometry. Do that 500 times on a single page, and you've spent 15–30ms just measuring text before you've drawn a single pixel.

For most apps, this is a nuisance. For text-heavy UIs — dashboards with hundreds of labels, editors, typographic animations, real-time chat — it becomes a fundamental bottleneck.

What Pretext Does Differently

Pretext, created by Cheng Lou (a former React core team member and creator of react-motion), takes a radically different approach: it never touches the DOM to measure text at all.

Instead, Pretext implements its own text measurement pipeline using an off-screen canvas and the browser's actual font engine. The result is cached, and all subsequent layout calculations are pure arithmetic — no reflows, no DOM queries, no layout thrashing.

For the same 500-text-block page:

That's roughly 500x faster — not from optimizing code paths, but from eliminating an entire class of expensive operations. (Performance varies by hardware and scenario.)

Core API Functions

Pretext provides a flexible API designed for performance:

prepare(text, font, options?)

Called once (or when content changes), this function:

• Normalizes whitespace and applies Unicode segmentation
• Segments text into measurable chunks
• Measures character widths using the canvas font engine
• Caches results for instant reuse

The font parameter is a string in canvas format (e.g., "16px Georgia" or "18px 'Helvetica Neue'").

import { prepare } from '@chenglou/pretext';

const prepared = prepare("Hello, world — this is Pretext.", "18px Georgia");

layout(prepared, maxWidth, lineHeight)

The hot path. Pure arithmetic over cached data — runs in microseconds and can be called on every animation frame without penalty. Returns measurement data, not an array of lines.

import { layout } from '@chenglou/pretext';

const result = layout(prepared, 400, 1.5); // 400px width, 1.5x line height
// → { height: 72, lineCount: 2 }

layoutWithLines(prepared, maxWidth, lineHeight)

Use this function when you need per-line data. Returns line-by-line measurements for rendering or positioning.

const result = layoutWithLines(prepared, 400, 1.5);
// → { height: 72, lineCount: 2, lines: [{text: "Hello, world —", width: 398, start: 0, end: 14}, ...] }

Other Utilities

• prepareWithSegments(text, font, options?) — for detailed segmentation data
• walkLineRanges(prepared, maxWidth, onLine) — iterate lines without building strings
• layoutNextLine(prepared, start, maxWidth) — measure a single line with variable widths
• clearCache() — release cached data
• setLocale(locale?) — configure locale for text breaking

No DOM, no reflows, no framework dependencies. Works identically in React, Vue, Svelte, or plain JavaScript.

What You Can Build With It

The pretext.cool community showcase currently hosts 17+ demos that show what's possible when text layout is fast enough to run on every animation frame:

• Real-time text reflow around dragged sprites — no jank, no flicker
• Physics simulations where words behave like rigid bodies
• Typographic games — fully playable Tetris and Breakout built from characters
• Cinematic animations — the Star Wars opening crawl with correct perspective layout
• Editorial layouts — multi-column text flowing around animated clocks
• Face-tracked typography — text that responds to your webcam in real time

These aren't demos built around Pretext's limitations. They're demos built because of Pretext's capabilities.

Language and Platform Support

Pretext handles the full complexity of global typography:

• CJK (Chinese, Japanese, Korean) — correct line breaking and character spacing
• Arabic and Hebrew — bidirectional text with proper shaping
• Thai, Hindi, Devanagari — script-specific segmentation
• Variable fonts and dynamic font loading — supported with correct remeasurement

It renders to anything: DOM elements, <canvas>, SVG, or server-side environments via Node.js.

Why It Matters Right Now

Pretext reached 7,000+ GitHub stars in its first three days and has now grown to 29,500+ stars — a testament to its impact on the developer community. That's not because it's a better way to center a div. It's because it unlocks a category of interfaces that simply weren't practical before: text as a first-class rendering primitive.

Designers have always known that typography is a design material, not just a content container. Pretext gives developers the tools to treat it the same way.

Try It Yourself

The best way to understand Pretext is to see it in motion. Browse the pretext.cool community showcase — 17 interactive demos built by developers from around the world, each pushing a different dimension of what's possible.

Ready to build? Start with the quick-start guide or dive into the Pretext Playground demo to experiment live.

Built with Pretext by chenglou. Community showcase at pretext.cool.