How Pure Math Eliminates DOM Layout Thrashing and Solves AI UI Lag

React core contributor and former Meta engineer Cheng Lou sparked a viral discussion in the frontend community by releasing a project called Pretext . Within a day the repository attracted 18.78 million views, 58 000 likes and 9 420 shares.

Where the problem comes from

Modern web pages often suffer from layout jitter, also known as layout thrashing. Typical symptoms include content jumping on load, chat bubbles with incorrect width, scrolling jank, and waterfall grids that pause before stabilising. The root cause is the browser’s legacy text‑measurement pipeline, designed decades ago for static documents. To obtain a text block’s height, the browser must fully render the text, compute line breaks, and then read the result from the DOM.

Calling getBoundingClientRect() forces a full layout recomputation each time. Measuring 500 text blocks therefore triggers 500 complete reflows, which can freeze the page.

Cheng Lou cited a comparison: 0.05 ms versus 30 ms per measurement, and zero reflows versus 500 reflows – a difference of orders of magnitude.

Pretext’s core idea

Pretext implements a complete text‑layout algorithm in pure TypeScript. It directly invokes the browser’s underlying font engine without touching the DOM, returning the dimensions of a string purely through mathematical calculation.

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

// Prepare once, then reuse
const prepared = prepare(texts, { fontFamily: 'Inter', fontSize: 16 });
// Pure arithmetic, 0.09 ms, no DOM
const result = layout(prepared, containerWidth);

The prepare() step analyses font and text information and costs about 19 ms for 500 blocks. Subsequent layout() calls take only 0.09 ms and perform no reflows.

Pretext also exposes manual line‑control APIs: walkLineRanges(), layoutNextLine() and layoutWithLines(). These let developers bypass CSS entirely, deciding exactly how each line is placed and rendering the result to Canvas, SVG, WebGL, or any custom layer.

What the demos showcase

Precise chat‑bubble shrinkage : Using walkLineRanges() a binary search finds the narrowest width that yields the same line count, eliminating the extra whitespace that fit-content leaves.

Waterfall text cards : Pretext predicts each card’s height ahead of time, allowing a single layout pass without the flash caused by traditional Masonry.

Dynamic magazine layout : Multi‑column, responsive, mixed‑media layouts are computed in JavaScript and then handed to the browser for drawing, achieving print‑level typographic precision.

Limitations

Pretext only supports standard text configurations: normal white-space, word-break, and overflow-wrap. It is not a full font‑rendering engine, does not handle CSS Shapes, and may exhibit precision issues with the system‑ui font on macOS, so named fonts are recommended.

Despite its focused scope, the library demonstrates that the long‑standing assumption “text layout is the browser’s job, just add a CSS hack” can be challenged. While CSS and DOM measurement will remain the default for most cases, Pretext provides a high‑performance alternative for scenarios that demand exact control, especially in AI‑generated content where dynamic text insertion and real‑time adjustments are common.

The package is published on npm as @chenglou/pretext under the MIT license and has already surpassed 15 000 stars.