# Pretext

> Pure TypeScript text measurement and layout library bypassing DOM reflow

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.

Website: https://github.com/chenglou/pretext

## What it is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/JoshKale/status/2037900758750761053): 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

- [Above-the-Fold Deferred Rendering Pattern](https://xiry.app/resources/above-the-fold-deferred-rendering-pattern): Performance pattern for deferring below-the-fold components to accelerate perceived page load. (Tip, Free)
- [NumberFlow](https://xiry.app/resources/numberflow-2047): Animated, accessible rolling-number component built on native Intl.NumberFormat and Web Animations. (Web app, Open source)
- [react-best-practices](https://xiry.app/resources/react-best-practices): Curated React performance rules and coding-agent skills by Vercel (GitHub repo, Open source)
- [Starter.diy](https://xiry.app/resources/starter-diy-2164): Full-stack SaaS starter with Next.js 15, Convex, and Clerk Billing (GitHub repo, Open source)
- [@json-render/react-pdf](https://xiry.app/resources/json-render-react-pdf): Render structured JSON specifications into PDFs using React PDF (GitHub repo, Open source)
- [2023 JavaScript Rising Stars](https://xiry.app/resources/2023-javascript-rising-stars): Annual overview of the fastest-growing JavaScript GitHub repositories in 2023. (Website, Free)

Updated 10 October 2026. Page: https://xiry.app/resources/pretext

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.