The guide · breakdown

The future of website interfaces.

Pretext is a single JavaScript/TypeScript package that lets you measure and lay out text without relying on the browser's layout engine. Every website you've ever used asks the browser to figure out where text goes — a process called "reflow", one of the slowest things a browser does, and the biggest bottleneck in web design for 30 years. Pretext skips it entirely: all measurement in pure TypeScript, no DOM, no CSS layout, no reflow. Just math. The result — hundreds of thousands of text elements rendering at 120fps.

The full breakdown

🔒 Drop your email to reveal the full breakdown

Get the full breakdown, free.

Drop your email and the breakdown unlocks instantly, plus every other guide and resource in the library. One email a week, unsubscribe anytime.

What the demos show

Demo	What it does
Masonry	Hundreds of thousands of text boxes, all different heights, scrolling at 120fps with zero DOM measurement.
Chat Bubbles	Shrinkwrapped chat bubbles that size themselves perfectly.
Magazine Layout	Multi-column responsive magazine layout — dynamic and real-time.
ASCII Art	Variable font-width ASCII art, because why not.
Accordion	Auto-growing text areas, accordions, multiline centering — things that used to be real CSS challenges, now trivial.

Why this matters (simple version)

Every website asks the browser permission to place text. That permission is slow. It causes lag. It's called "reflow".
Pretext skips that permission entirely. It calculates text layout in pure TypeScript.
The performance difference is insane. 0.05ms vs 30ms. Zero reflows vs hundreds.
This unlocks UI that wasn't possible before. Smooth virtualization, masonry layouts, magazine-style text, shrinkwrapped elements — all without CSS hacks.

Quick start

Install:

npm install @chenglou/pretext

import { prepare, layout } from '@chenglou/pretext'
const prepared = prepare('Your text here', '16px Inter')
const { height, lineCount } = layout(prepared, maxWidth, 20)
// That's it. No DOM. No reflow. Pure math.

I want to use @chenglou/pretext to measure text height without DOM reflow. Show me how to set up prepare() and layout() for a list of 1000 items with variable text lengths, and use the heights for virtualized scrolling.

Using @chenglou/pretext, help me build a masonry grid layout where each card contains variable-length text. I want to calculate all card heights upfront without any DOM measurement, then position them in columns using absolute positioning.

I'm building a chat interface. Using @chenglou/pretext and walkLineRanges(), help me shrinkwrap each chat bubble to the exact width of its longest line instead of using a fixed max-width. I want the bubbles to feel tight and natural.

Using @chenglou/pretext's layoutWithLines(), help me render multiline text directly to an HTML canvas with proper line breaking and word wrapping. I want to bypass DOM text rendering entirely.

Help me build a responsive multi-column magazine-style text layout using @chenglou/pretext's layoutNextLine(). The text should flow around an image floated in the first column, with narrower line widths beside the image and full-width lines below it.

prepare(text, font, options?)
// Returns opaque PreparedText handle
layout(prepared, maxWidth, lineHeight)
// Returns { height, lineCount }

prepareWithSegments(text, font, options?)
// Returns richer structure for manual layout
layoutWithLines(prepared, maxWidth, lineHeight)
// Returns { height, lineCount, lines[] }
walkLineRanges(prepared, maxWidth, onLine)
// Calls onLine per line with width + cursors — no string building
layoutNextLine(prepared, start, maxWidth)
// Iterator-style — one line at a time with variable widths

clearCache()
// Clears internal caches if cycling through many fonts
setLocale(locale?)
// Sets locale for future prepare() calls

The future of website interfaces.

The full breakdown

Get the full breakdown, free.

Links

What the demos show

Why this matters (simple version)

Quick start

How it works

Prompts to try with AI

Full API reference

Use case 1: Measure height only (fastest)

Use case 2: Manual line layout (full control)

Helpers

Things to know

Who built this