Pretext

Overview

Pretext is an open-source TypeScript library that measures and lays out multiline text without touching the DOM. It sidesteps getBoundingClientRect and offsetHeight — two of the most expensive operations in the browser — by implementing its own text measurement logic using the browser's font engine as ground truth.

The library works in two phases: a one-time prepare() step that segments text and caches measurements via canvas, and a hot-path layout() call that performs pure arithmetic to calculate line breaks and heights. The layout phase runs at roughly 0.09ms per text block, making it practical for virtualized lists, dynamic grids, and any scenario where you need text dimensions before rendering.

Pretext handles all languages including Chinese, Arabic, Hebrew, emoji, mixed bidirectional text, soft hyphens, and browser-specific quirks. It was built by Cheng Lou (known for React Motion and Reason) and has surpassed 15,000 GitHub stars. The project was developed using Claude Code and Codex with an AI verifier loop testing against real browsers at various widths.

Key Features

• DOM-free text measurement — Calculate paragraph height without triggering layout reflow, avoiding one of the biggest performance bottlenecks in browser rendering.

• Sub-millisecond layout speed — The layout() function runs in approximately 0.09ms per text block after preparation, fast enough for real-time resize handling and virtualized scrolling.

• Full language and emoji support — Works with all writing systems including CJK, RTL scripts (Arabic, Hebrew), emoji sequences, mixed bidirectional text, and soft hyphens.

• Multiple rendering targets — Pretext provides layout APIs whose output can be rendered to Canvas, SVG, or WebGL, with server-side support described in official docs as planned.

• Line-by-line layout control — Use layoutWithLines() for manual line routing, enabling non-rectangular text containers like circles, polygons, or masonry layouts.

• Variable-width line support — The layoutNextLine() API handles lines of different widths, useful for text wrapping around images or irregular shapes.

How to Get Started

1. Install the package:

   npm install @chenglou/pretext
   

2. Import and prepare your text:

   import { prepare, layout } from '@chenglou/pretext';
   const prepared = prepare("Your text here", "16px Inter");
   

3. Calculate height — Call layout() with a container width and line height to get an object containing the text height and line count:

   const { height, lineCount } = layout(prepared, 300, 20); // width in pixels, 20px line-height
   

4. Handle resizes — Only re-run layout() (not prepare()) when the container width changes. The layout call is pure arithmetic and extremely fast.

5. Advanced usage — Use layoutWithLines() for line-by-line rendering, walkLineRanges() for line metrics, or layoutNextLine() for variable-width layouts.

Check the live demos for interactive examples of text height calculation, manual line routing, and width-tight multiline UI.

Pricing & Plans

Pretext is completely free and open source under the MIT license. There are no paid tiers, usage limits, or commercial restrictions.

Best For

• Frontend developers building virtualized lists or data grids who need accurate row heights before rendering
• Teams implementing custom text layouts like masonry grids, text-in-shape rendering, or responsive accordion components
• Applications generating dynamic subtitles or captions that need pre-calculated text dimensions
• Projects where layout shift from late text measurement is a UX problem that needs solving
• Developers working with multilingual content who need reliable text measurement across all writing systems

FAQ