Pretext: Pure TypeScript Text Measurement Without DOM

Lightning-fast, pixel-perfect multiline text layout in pure JS/TS. No reflows. No getBoundingClientRect(). The missing primitive for next-gen web UIs.

What is Pretext?

Pretext is a tiny, dependency-free library by Cheng Lou that solves one of the hardest problems in UI engineering: measuring and laying out text **without ever touching the DOM**.

It uses the browser’s Canvas measureText, normalizes whitespace, handles complex scripts (CJK, emojis, BiDi, RTL), and returns an opaque PreparedText handle. All subsequent layout operations are pure math — extremely fast and cacheable.

This unlocks 120fps variable-height virtualization, perfect shrinkwrapped bubbles, obstacle-aware text flow, dynamic magazine layouts, and more.

Why Pretext Matters for Our Team

Text measurement was the last major bottleneck for truly dynamic, AI-generated, or high-performance UIs. Pretext removes it completely.

~300–600× faster than traditional DOM-based measurement
Perfect for virtualized feeds, accordions, chat UIs, canvas rendering, and generative layouts
Works anywhere: React, Astro, Canvas, SVG, Three.js, etc.
Full support for every language and browser quirk

Key Features

⚡ One-time Prepare, Cheap Layout

Prepare text once → layout calls become blazing fast (~0.09ms).

📏 Full Multiline Support

Handles white-space: pre-wrap, line-height, and manual line control.

🧩 Obstacle-Aware Routing

Route text around images, shapes, or dynamic elements.

📦 High-Performance Virtualization

Accurate height prediction for masonry and variable-height lists at 120fps.

💬 Shrinkwrapped Text

Perfect chat bubbles and inline rich text with minimal wasted space.

🌍 Global Language Support

Emojis, CJK, RTL Arabic, Korean — all handled correctly.

Live Demos

Full Tutorial & Code Examples

For the complete hands-on tutorial with copy-paste code examples (installation, basic usage, advanced layouts, obstacle routing, etc.), see our dedicated guide:

→ Open Pretext Tutorial (Markdown)

This keeps the Astro page lightweight and deployable on Netlify while giving the team a rich, updatable reference.

Project Links

GitHub Repository

github.com/chenglou/pretext →

NPM Package

@chenglou/pretext →

Inspired by the viral thread from @_chenglou
Living tutorial for the MikesBlogDesign team — mastering modern web text layout.