The Overlooked DOM Tax
In the age of AI, text measurement has become the final barrier to fluid and dynamic innovation.
The Interleaving Death Loop
Every time you call getBoundingClientRect(), the browser is forced into a
synchronous reflow.
In large-scale UIs, this Read/Write Interleaving is the most expensive operation on the web,
killing 120fps performance.
The Pretext Solution
Decouple layout from the browser's render loop. By using Pure Arithmetic in memory to compute typography, performance is boosted by 500x — bringing layout back to arithmetic.
Bypassing the Status Quo
120fps Virtualization
Occlusion of hundreds of thousands of text boxes — each a different height — without touching the DOM. A single linear traversal replaces the entire measurement stack. Masonry. Infinite scrolls. All simplified.
Deterministic AI UIs
When interfaces are synthesized on-the-fly by AI agents, you can't afford reflow bottlenecks. Pure arithmetic layout means AI can compute interfaces deterministically, not by guess-and-check CSS.
Responsive Magazines
True multi-column layouts, as precise as print — yet dynamic. Drag a handle and watch the text reflow in real time across columns. A problem CSS Regions promised to solve and never did.
Shrinkwrapped Bubbles
Chat bubbles that automatically hug their content width with mathematical precision — no CSS tricks, no fixed widths, no measurement hacks.
Variable ASCII Art
Every character's position is calculated mathematically. Even ASCII art achieves the elegance of proportional fonts at 120fps — because it's just arithmetic now.
Auto-Growing Inputs
Auto-growing text areas, accordions, multi-line centering, pure Canvas multiline — all the CSS riddles that kept senior devs up at night, now reduced to a boring footnote.
A Win for Arithmetic
This is not just a speed lead, but a leap in engineering philosophy.
- Cold/Hot Path Separation: Analysis and calculation are perfectly decoupled.
- Script Aware: Effortless mixed layout for Arabic, CJK, and Thai.
- Emoji Precision: Automatic correction of browser-level Canvas discrepancies.
See It In Action
Interactive playgrounds that showcase what becomes possible when text layout is pure math.
Masonry Virtualization
100,000+ variable-height text boxes. 120fps. Zero DOM measurements.
Shrinkwrapped Bubbles
Chat bubbles that perfectly hug their text content width.
Dynamic Magazine
Responsive multi-column layout that reflows text as you drag.
Variable ASCII Art
Proportional font-powered ASCII art at 120fps.
Accordion & More
Auto-growing inputs, accordions, pure Canvas multiline text, all in one playground.
Full Demo Glossary
The complete collection — useful, experimental, and purely showing off.
Zero Dependencies.
One Install.
A few KBs of pure TypeScript. No native modules, no WASM bundles, no DOM required — works in the browser, Canvas, WebGL, and even server-side.
npm install @chenglou/pretext
# or
bun install @chenglou/pretextimport { prepare, layout } from '@chenglou/pretext';
// Step 1: Analyze text once (cold path)
const handle = prepare(text, '16px Inter');
// Step 2: Layout at any width, instantly (hot path)
const results = layout(handle, containerWidth, lineHeight);
// → { lines, totalHeight, totalWidth }The Internet Reacts
What the front-end world said when Pretext dropped.
"The masonry virtualization at 120fps with varying heights is insane. Text measurement has been the silent killer of smooth custom UIs for years."
"bypassing DOM measurement is load-bearing infrastructure for the AI-generated UI era — when the interface itself is synthesized on the fly, you can't afford reflow bottlenecks."
"everyone spent a decade arguing CSS-in-JS vs utility classes while this man just said 'what if no CSS at all' — this is what happens when someone actually solves problems."
"solving the problem CSS pretended didn't exist for 25 years. Everyone's thought about this. He just actually did it."
"if you can measure and lay out text without the DOM, you can render UI anywhere — canvas, WebGL, native. The browser layout engine stops being the bottleneck. That's not a library. That's a paradigm escape."
"My wife has a fashion website and has always wanted a magazine layout. I converted one of her articles and she is very excited."