The Pretext Library

Overview

What Is the Pretext Library?

The Pretext library is a pure JavaScript/TypeScript text measurement engine created by Cheng Lou, a former React core team member now at Midjourney. Unlike traditional approaches that require the browser to render text into the DOM before you can measure it, the Pretext library splits text layout into two lightweight phases — making it the fastest text measurement library available for JavaScript.

The first phase of the Pretext library is preparation. You call prepare() once with your text and font. The Pretext library segments the text using Unicode rules and measures each segment's glyph width via the Canvas measureText() API. This typically takes 0.1–1ms depending on text length.

The second phase is layout. You call layout() with a container width and line height. The Pretext library walks the cached segment widths using pure arithmetic — no DOM access, no forced reflow. A single layout call in the Pretext library takes ~0.001ms, fast enough to run thousands of times per frame. The prepared handle is reusable: compute heights for mobile, tablet, and desktop from the same handle in three operations.

The Pretext library on GitHub (github.com/chenglou/pretext) — 23.6k stars, MIT-licensed, pure TypeScript

$ npm install @chenglou/pretext

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

const prepared = prepare('Your text', '16px Inter')
const { height, lineCount } = layout(prepared, 400, 24)

Performance Comparison

Pretext Library vs DOM Measurement

Traditional DOM measurement creates invisible elements, renders text, reads the computed height, then removes the element. The Pretext library eliminates this entire cycle. Here is how the Pretext library compares to standard approaches.

API

Pretext Library API Reference

The Pretext library exposes a small, focused API. Every function in the Pretext library serves a specific purpose — preparation or layout. Here is the complete function reference.