Pretext: The End of DOM Reflows for Text Layout

2026-03-29 • Ola Olukiyesi

Pretext: The End of DOM Reflows for Text Layout

How a pure TypeScript engine is unlocking 500× faster UIs and the next generation of web interfaces

For two decades, web developers have fought the same invisible enemy: layout thrashing.

Every time you call getBoundingClientRect(), offsetHeight, or let the browser auto-measure a paragraph for virtualization, masonry grids, chat bubbles, or responsive articles, the browser performs expensive reflows. In complex UIs with thousands of variable-height text blocks, this becomes the single biggest performance bottleneck.

Cheng Lou — veteran UI engineer who worked on React and Meta’s Messenger — just shipped a solution that changes the game.

Introducing Pretext

Pretext (@chenglou/pretext) is a lightweight, pure JavaScript/TypeScript library for multiline text measurement and layout that never touches the DOM.

It delivers pixel-perfect accuracy across Chrome, Firefox, and Safari — including tricky cases like CJK languages, RTL Arabic mixed with emojis, variable fonts, and complex scripts — while being dramatically faster than traditional methods.

By implementing its own measurement logic (grounded in the browser’s font engine via Canvas for calibration), Pretext sidesteps reflows entirely. The result? Sub-millisecond measurements that scale to thousands of elements without breaking a sweat.

Why This Matters

Modern UIs increasingly demand dynamic, AI-generated, or highly personalized content:

  • Virtualized feeds with variable-height cards
  • Responsive magazine-style multi-column layouts
  • Tight chat message bubbles that shrinkwrap perfectly
  • Auto-growing inputs and accordions
  • Canvas/WebGL text rendering that matches CSS exactly
  • Server-side or off-main-thread layout prediction

Until now, these features forced painful trade-offs between accuracy, performance, and complexity. Pretext removes the trade-off.

Early benchmarks and community tests show massive gains — up to 500× faster layout passes in virtualization scenarios, enabling buttery 120fps experiences even with heavy text-heavy UIs.

How It Works (Without the Magic)

Pretext exposes a simple, powerful API built around two core functions: prepare() and layout().

You create a measurement context once with your font and text styles:

import { createContext, measure } from '@chenglou/pretext';

const ctx = createContext({
  fontFamily: 'Inter, system-ui',
  fontSize: 16,
  lineHeight: 1.5,
  // ...any CSS text properties
});

const result = measure("Your long text that needs wrapping and height calculation...", {
  context: ctx,
  width: 320,        // container width
  // optional: maxLines, ellipsis, etc.
});

From there you get accurate line breaks, heights, baselines, and segment metrics — all as pure data. No DOM nodes. No reflows. No batching hacks.

The library was iteratively refined using AI models trained on real browser rendering behavior, making it exceptionally robust across edge cases that usually break custom measurement solutions.

Real-World Demos That Feel Like Sorcery

Head over to the official demo site to see Pretext in action:

  • Masonry grids with perfect occlusion culling and height prediction
  • Chat bubbles that maintain consistent line counts with minimal wasted space
  • Accordions that expand/collapse smoothly using pre-computed heights
  • Editorial engines with responsive multi-column text that rivals print layouts
  • Even a text breakout game built on top of the speed

These aren’t proofs of concept — they’re production-viable patterns that suddenly become trivial to implement.

Who Should Care?

  • Framework authors and library maintainers building the next generation of virtualizers
  • AI-powered UI tools that generate dynamic interfaces on the fly
  • Game and canvas developers needing CSS-accurate text without the DOM
  • Performance-obsessed teams tired of layout thrashing in large feeds or dashboards
  • Anyone who wants to push web UIs beyond what CSS alone can comfortably handle

As one excited developer put it after seeing the demos: the paradigm of forcing all text layout into a single-direction black hole is finally breaking open.

Get Started Today

npm install @chenglou/pretext
# or
bun add @chenglou/pretext

Links:

Pretext is still very new, but the foundation is rock-solid and the vision is clear: make text layout programmable, fast, and accurate enough that we can finally stop treating the browser’s layout engine as a black box.

Cheng Lou didn’t just ship a library — he shipped a primitive that could redefine how we build ambitious web interfaces in the AI era.

The era of userland text engines has begun.

What will you build with it?

PerformanceTypeScriptUIOpen Source