Pretext: TypeScript library for multiline text measurement and layout

Dev crowd cheers a text tool that dodges page hiccups and ignites a search debate

TLDR: Pretext measures multi-line text fast without triggering page reflow, letting apps stay smooth. Commenters cheered the demos, warned about broken Ctrl+F in virtualized lists, and traded horror stories; the debate: new web Search API or live with hacks.

Developers are losing their minds over Pretext, a tiny text tool promising smooth pages by measuring multi‑line text without poking the browser’s layout engine. Translation: less stutter, more speed. One fan, rattray, called the launch tweets “a masterclass,” and then dropped the mic with the scary number everyone hates: 30ms+ per frame when old‑school methods measure lots of text. Pretext’s trick? Do the heavy math once, then keep the fast path clean, using the browser’s font smarts as the source of truth. The crowd loves it. The comments? Even juicier. A fight breaks out over search in “infinite lists” (those never‑ending feeds): gastonmorixe says we might need a brand‑new web Search API so Ctrl+F finds stuff that isn’t in the page yet. Skeptics reply with a collective “good luck convincing browsers.” Meanwhile, war stories roll in. dalmo3 tried canvas‑based measuring for a datagrid and calls it “hellish.” rpastuszak swoons over shape‑based reflow for prettier cursor jumps, then swears they’ll keep things simple—cue the meme: “I could fix it, but I won’t.” Jokes fly: “The DOM is lava,” “text layout is the final boss,” and “AI can finally label buttons without breaking everything.” The vibe is pure relief-meets-rage: speed thrills, search kills, and Pretext has people dreaming of fewer hacks. Check the demos: chenglou.me/pretext and somnai-dreams.github.io/pretext-demos

Key Points

  • Pretext is a JavaScript/TypeScript library for multiline text measurement and layout that avoids DOM reflow by using canvas-based measurement.
  • It offers two main use cases: computing paragraph height without DOM access and manually laying out lines for custom rendering.
  • The prepare() step segments and measures text via canvas and caches widths; layout() uses pure arithmetic on cached widths to return height and line count.
  • Benchmark snapshot: prepare() ~17ms for a shared 500-text batch; layout() ~0.10ms for the same batch.
  • Supports rendering to DOM, Canvas, SVG (and later server-side) and handles many languages including emojis and mixed bidirectional text.

Hottest takes

“a masterclass in demoing why an architectural/platform improvement can be impactful” — rattray
“30ms+ per frame for 500 text blocks” — rattray
“Maybe for this we need a new web ‘Search’ API” — gastonmorixe
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.