Descriptions:
Pretext is a new TypeScript library created by Chang Lu — a former React core team member and engineer at Midjourney — that solves one of the oldest performance problems in web UI development: measuring text dimensions without triggering costly browser layout reflows. The library uses the Canvas API to calculate pixel-accurate text widths entirely outside the DOM, bypassing the standard browser rendering pipeline. For text height, Chang built a custom line-break algorithm that accounts for how every major browser handles line breaks across different languages and scripts — a process that took weeks of AI-assisted testing and iteration to get right.
The result is a two-step API: `prepareWithSegments` breaks text into cached segments, and `layout` returns total height and line count — all without touching the DOM or forcing reflow. This makes previously impractical UI components like virtualized lists and masonry layouts far easier to build accurately and performantly. Fireship walks through the engineering decisions behind the library, explaining why the Canvas API sidesteps reflow costs and what made cross-browser, multilingual line-break behavior such a difficult problem to solve.
The video also includes a creative demo where Pretext drives a terminal-style ASCII video renderer — each character precisely placed using the library’s layout engine — illustrating just how granular and reliable its character-level positioning can be. Developers building text-heavy interfaces or performance-sensitive UI components will find this a compelling case for rethinking how text measurement is handled in the browser.
📺 Source: Fireship · Published April 02, 2026
🏷️ Format: Showcase
