If you've ever tried to animate text wrapping around an image on a webpage — smoothly, in real-time, without jank — you already know the pain. The browser's layout engine wasn't designed for that. Every time you need to figure out how tall a paragraph is or where a line breaks, the DOM triggers a reflow. On mobile, a single forced reflow can block the main thread for 10–100ms. Multiply that across a chat interface, an editorial layout, or a product page with dynamic content, and you've got a performance nightmare hiding in plain sight.
Last Friday, Cheng Lou — the developer behind React Motion, ReasonML, and currently a frontend engineer at Midjourney — open-sourced a library called Pretext. And honestly? I haven't been this excited about a frontend tool in a while.
What Pretext Actually Does
Pretext is a 15KB, zero-dependency TypeScript library that handles multiline text measurement and layout entirely outside the DOM. No reflows. No getBoundingClientRect() calls in the hot path. Just math.
It works in two phases:
-
prepare()— A one-time pass that normalises whitespace, segments the text (handling words, soft hyphens, emoji, CJK characters, RTL scripts), and measures everything using an off-screen canvas. The result gets cached. -
layout()— The fast path. Pure arithmetic over cached widths. Given a max width and line height, it calculates how many lines the text occupies and what the total height is. On resize, you only re-runlayout(), notprepare().
The numbers are staggering: Cheng Lou reports roughly 500x faster performance in the hot path — 0.09ms for 500 text blocks versus what traditional DOM measurement takes. He himself calls the comparison "unfair" because it excludes the one-time prepare() cost (~19ms), but for any scenario where you're re-laying out text on scroll, resize, drag, or animation frames, that hot path speed is what actually matters.
The Text-Around-Image Magic
The part that's been breaking the internet is layoutNextLine(). This API lets you route text one line at a time, varying the available width per line. So if you have an image floating in the middle of a text block, lines next to the image get a narrower width, and lines below it get the full container width.
CSS has shape-outside for this — but it requires floats, alpha masks, and doesn't respond to dynamic interactions like drag-and-drop or rotation. Pretext does all of that in JavaScript, recalculating in real-time without touching the DOM.
The community demos have been wild:
- A dragon flying through a paragraph, breathing fire while text reflows around it
- A phone-tilt demo where letters fall like physical objects when you tip the device
- Editorial layouts with animated orbs and multi-column text flow
- Tight chat bubbles that shrink-wrap to the actual text width (solving a CSS problem that's been around forever)
You can see the official demos at chenglou.me/pretext.
How It Was Built (This Part Fascinates Me)
Cheng Lou built Pretext using Claude Code and OpenAI's Codex. He fed the models browser benchmark data and had them iteratively test and optimise the TypeScript layout logic against actual rendering in Chrome, Safari, and Firefox. The test corpus includes the full text of The Great Gatsby and multilingual datasets in Thai, Chinese, Korean, Japanese, and Arabic.
The result is pixel-perfect accuracy across browsers without WASM binaries or font-parsing libraries. Just a few KBs of TypeScript that understands browser quirks better than most developers do.
This is the kind of AI-assisted engineering I've been talking about — not "vibe coding" throwaway apps, but using AI to grind through the tedious, empirical work of matching browser behaviour at scale. Cheng Lou spent weeks on this. The AI accelerated the iteration; it didn't replace the architecture.
Why This Matters Beyond Cool Demos
Here's where my brain starts connecting dots to real client work:
Chat interfaces and messaging UIs. Every chat app has the bubble-width problem — CSS makes bubbles wider than they need to be. Pretext's shrink-wrap calculation solves this without hacks. If you're building a customer support widget, a WhatsApp-style interface, or an AI chat product, this is directly useful.
Editorial and magazine layouts on the web. We build landing pages and content-heavy sites for D2C brands at Innovatrix. Imagine product storytelling pages where text flows dynamically around product images, adapting to screen size in real-time. That's not a CSS hack anymore — it's a few lines of Pretext.
Canvas-based and virtualized UIs. If you're rendering hundreds of text blocks (think dashboards, design tools, whiteboard apps), knowing the exact height of each block before rendering means you can virtualize efficiently without layout thrashing.
Accordion and collapsible sections. Animating height changes smoothly has always required measuring DOM elements. Pretext lets you calculate the target height mathematically, enabling buttery animations without forced reflows.
Masonry layouts. The "Pinterest layout" problem — where you need to know card heights before placing them — has always required DOM reads. Pretext can predict text heights without rendering, making masonry layouts genuinely performant.
What We're Going to Explore at Innovatrix
I'm not just writing about this — we're going to experiment with it. A few things on my list:
- Integrating Pretext into a Shopify theme for a D2C client's editorial product pages — text flowing around product images with smooth resize behaviour
- Building a chat widget prototype using Pretext for tight bubble layouts (relevant for our AI automation work with Chatwoot integrations)
- Testing it inside a Next.js app for dynamic content sections where we currently fight with CSS for height calculations
If any of these experiments yield something production-worthy, I'll write a follow-up with code and benchmarks.
The Honest Take
Is this the end of CSS? No. For 95% of websites — blogs, landing pages, standard layouts — CSS is perfectly fine and Pretext adds no value. Cheng Lou himself acknowledges this.
But for the 5% of web applications where text layout performance is a bottleneck — chat apps, collaborative editors, design tools, canvas-based UIs, editorial platforms — this is genuinely important infrastructure. At 6,800+ GitHub stars in under a week, the community clearly agrees.
Pretext is MIT-licensed and available at github.com/chenglou/pretext. If you're building anything where text layout performance matters, go play with it.
Frequently Asked Questions
What is Pretext and who built it?
Pretext is a 15KB, zero-dependency TypeScript library for multiline text measurement and layout, created by Cheng Lou — the developer behind React Motion, ReasonML, and currently a frontend engineer at Midjourney. It was open-sourced on March 27, 2026.
How fast is Pretext compared to DOM-based text measurement?
In the hot path, Pretext processes 500 text blocks in approximately 0.09ms — roughly 300–600x faster than traditional DOM measurement via getBoundingClientRect(). The one-time prepare() phase takes about 19ms, but subsequent layout() calls are pure arithmetic.
Does Pretext replace CSS for text layout?
No. For standard websites — blogs, landing pages, marketing sites — CSS handles text layout perfectly well. Pretext is valuable for performance-critical scenarios like chat interfaces, collaborative editors, design tools, canvas-based UIs, and real-time editorial layouts.
What languages and scripts does Pretext support?
Pretext supports English, CJK characters (Chinese, Japanese, Korean), RTL scripts (Arabic), Thai, emoji, soft hyphens, and mixed-direction text. The test suite includes multilingual corpora validated against Chrome, Safari, and Firefox rendering.
Can Pretext render text flowing around images?
Yes. The layoutNextLine() API lets you vary available width per line, enabling text to flow around images, shapes, or any dynamic obstacle — including drag-and-drop and rotation — all recalculated in real-time without DOM reflows.
How was Pretext built using AI?
Cheng Lou used Claude Code and OpenAI's Codex to iteratively test and optimise the TypeScript layout logic against actual browser rendering. AI models helped reconcile text measurement math against browser ground truth across massive text corpora, achieving pixel-perfect accuracy.
Is Pretext production-ready?
Pretext is MIT-licensed and under active development. The core measurement and layout APIs work reliably, but server-side rendering is not yet implemented. Evaluate carefully before using in production, especially for mission-critical applications.
How do I install Pretext?
Install via npm: npm install @chenglou/pretext. Then import prepare and layout (or prepareWithSegments and layoutWithLines for more control). See the official demos at chenglou.me/pretext for working examples.
Rishabh Sethia, Founder & CEO of Innovatrix Infotech. Former SSE/Head of Engineering. DPIIT Recognized Startup. Official Shopify, AWS, and Google Partner.
Top comments (0)