xiry.

Development · Web app

Pretext

Pure TypeScript text measurement and layout library bypassing DOM reflow

From the Xiry library · Updated 10 October 2026

Visit github.com ↗

Pretext is a TypeScript library that handles accurate text measurement and line-breaking layout purely in JavaScript. By avoiding browser DOM layout thrashing and reflow pipelines, it enables high-performance, magazine-style editorial layouts that dynamically wrap around irregular shapes and resize fluidly.

What it's for

  • Wrap text fluidly around arbitrary shapes and images without CSS float limitations
  • Calculate text metrics and line breaks without triggering synchronous DOM reflow
  • Build custom multi-column magazine and newspaper layouts in the browser at high frame rates

Features

  • Pure TypeScript userland text measurement and layout engine
  • Bypasses DOM measurements to eliminate layout thrashing
  • Dynamic line-breaking and text flow around complex obstacles
  • Rich inline text support with fine-grained whitespace and wrap handling

Pricing

Open source

Details

Type
Web app
Category
Development
Topic
Typography & Layout
Open source
Yes
Platforms
Web, Code library
For
Frontend developers and UI engineers building complex typography or editorial web applications
Alternative to
CSS Shapes, Canvas text metrics
Tags
typescript, typography, layout, performance, dom, text rendering

Why it was saved

  • @JoshKale, 28 March 2026: Bypasses the 30-year-old browser layout pipeline (reflow, synchronous layout thrashing) with pure-JS text measurement, enabling editorial layouts previously impossible on the web. The author's demo shows an essay reflowing live around logos while resizing at any dimension.

Related

Updated