Pretext: The Tiny Library That Makes Web Text Layout 500x Faster

For 30 years, the web has treated text as a second-class citizen. While print designers have long flowed paragraphs around images, wrapped columns, and fit type into arbitrary shapes, browsers have offered none of that without expensive DOM reflows. Pretext, a new open-source library by Midjourney engineer Cheng Lou, changes that — measuring and laying out multiline text up to 500 times faster than traditional browser methods, all at a smooth 120fps.

Key Highlights

• No DOM reflows: Pretext implements its own text measurement logic using the browser's font engine via Canvas, completely bypassing costly operations like getBoundingClientRect and offsetHeight
• Two core operations: prepare() analyzes and caches text measurements in roughly 19ms for 500 paragraphs, while layout() calculates heights in just 0.09ms for the same batch
• Magazine-quality typography: Text flows around obstacles, wraps into columns, and fits into arbitrary shapes — capabilities previously considered impossible on the web
• Universal rendering: Works with DOM, Canvas, and SVG, with server-side support planned
• Full language support: Handles all scripts including right-to-left text, emoji, and mixed bidirectional content

How It Works

The core insight behind Pretext is simple but powerful. Instead of inserting text into the DOM and measuring the result — which triggers browser layout reflow, one of the most expensive operations in rendering — Pretext uses the Canvas measureText() API to build its own measurement cache. From that cache, it can calculate paragraph heights, return individual line objects, and even lay out text line-by-line with variable widths.

The library exposes a progressive API. At its simplest, prepare() followed by layout() gives you a paragraph's height without touching the DOM. For advanced use cases, layoutWithLines() returns individual line objects, walkLineRanges() enables shrink-wrapped text bubbles, and layoutNextLine() lets you feed different widths per line — making text flow around obstacles trivially.

What This Enables

The project's demo page showcases seven interactive examples that demonstrate what becomes possible:

• Editorial layouts with animated orbs, live text reflow, pull quotes, and multi-column flow — all without a single DOM measurement
• Tight message bubbles that maintain line count with minimal wasted whitespace, similar to messaging apps
• Masonry layouts where card heights are predicted from text content rather than measured after rendering
• Obstacle-aware titles that route text around images in real time
• Rich inline formatting with code spans, links, and chips that wrap naturally

These patterns have been standard in print design and native apps for decades but remained impractical on the web due to performance constraints.

Why It Matters

Text layout is a foundational problem in web development. Every chat bubble, every card grid, every editorial page needs to know how tall text will be before rendering it. The standard approach — render invisibly, measure, then position — causes layout thrashing and janky scrolling, especially on mobile devices.

Pretext eliminates this entire class of performance problems. At 0.09ms per layout calculation, developers can recompute text positions on every animation frame without dropping below 120fps. This opens the door to fluid, magazine-quality web typography that responds to user interaction in real time.

Background

Cheng Lou, known in the React community for his work on React Motion and Reason (ReasonML), built Pretext while working at Midjourney. The library draws on foundational concepts from Sebastian Markbage's earlier text-layout project. It ships under the MIT license and has already gained over 6,000 GitHub stars within days of its public release.

The library supports standard text behaviors including white-space: normal, word-break: normal, overflow-wrap: break-word, and an optional pre-wrap mode that preserves spaces, tabs, and line breaks.

What's Next

Server-side rendering support is listed on the roadmap, which would enable text layout calculations during build time or on the server — further reducing client-side work. The library is written in TypeScript with zero dependencies, making it straightforward to integrate into any web project.

Source: Pretext on GitHub