April 20, 2026•1 min read•from InfoQ

Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Our take

Cheng Lou, a Midjourney engineer, has introduced Pretext.js, an innovative 15KB open-source TypeScript library that revolutionizes text measurement and layout without incurring browser layout reflows. This groundbreaking tool allows developers to implement advanced UX/UI patterns, such as infinite lists, masonry layouts, and scroll position anchoring, all running smoothly at 60-120 frames per second. Built on an AI-driven approach that reverse-engineers the DOM's layout calculations, Pretext.js empowers creators to elevate user experiences while maintaining exceptional performance and efficiency.

Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Cheng Lou, a Midjourney engineer, recently released Pretext, a 15KB open-source TypeScript library that measures and lays out text without browser layout reflows, enabling advanced UX/UI patterns like infinite lists, masonry layouts, and scroll position anchoring to run at 60-120 fps. Pretext was built using an AI loop that reverse-engineered the DOM’s layout calculations.

By Bruno Couriol

Read on the original site

Open the publisher's page for the full experience

View original article →

Midjourney engineer debuts new vibe coded, open source standard Pretext to revolutionize web designFor three decades, the web has existed in a state of architectural denial. It is a platform originally conceived to share static physics papers, yet it is now tasked with rendering the most complex, interactive, and generative interfaces humanity has ever conceived. At the heart of this tension lies a single, invisible, and prohibitively expensive operation known as "layout reflow." Whenever a developer needs to know the height of a paragraph or the position of a line to build a modern interface, they must ask the browser’s Document Object Model (DOM), the standard by which developers can create and modify webpages. In response, the browser often has to recalculate the geometry of the entire page — a process akin to a city being forced to redraw its entire map every time a resident opens their front door. Last Friday, March 27, 2026, Cheng Lou — a prominent software engineer whose work on React, ReScript, and Midjourney has defined much of the modern frontend landscape — announced on the social network X that he had "crawled through depths of hell" to release an open source (MIT License) solution: Pretext, which he coded using AI vibe coding tools and models like OpenAI's Codex and Anthropic's Claude. It is a 15KB, zero-dependency TypeScript library that allows for multiline text measurement and layout entirely in "userland," bypassing the DOM and its performance bottlenecks. Without getting too technical, in short, Lou's Pretext turns text blocks on the web into fully dynamic, interactive and responsive spaces, able to adapt and smoothly move around any other object on a webpage, preserving letter order and spaces between words and lines, even when a user clicks and drags other objects to intersect with the text, or resizes their browser window dramatically. Ironically, it's difficult with mere text alone to convey how significant Lou's latest release is for the entire web going forward. Fortunately, other third-party developers whipped up quick demos with Pretext showing off some of its more impressive powers, including dragon that flies around within a block of text, breathing fire as the surrounding characters melt and are pushed out of the way from the dragon's undulating form. Another guy made an app that requires the user to keep their smartphone exactly level, horizontal to read the text — tipping the device to one side or the other causes all the letters to fall off and collect there as though they were each physical objects dumped off the surface of a flat tray. Someone even coded a web app allowing you to watch a whole movie (the new Project Hail Mary starring Ryan Gosling) while reading the book it is based on at the same time, all rendered out of interactive, moving, fast, responsive text. While some detractors immediately pointed out that many of these flashy demos make the underlying text unreadable or illegible, they're missing the larger point: with Pretext, one man (Lou) using AI vibe coding tools has singlehandedly revolutionized what's possible for everyone and anyone to do when it comes to web design and interactivity. The project hasn't even been out a week — of course the initial users are only scratching the surface of the newfound capabilities which heretofore required complex, custom instructions and could not be scaled or generalized. Of course, designers and typographers may be the ones most immediately impressed and affected by the advance — but really, anyone who has spent time trying to lay out a block of text and wrap it around images or other embedded, interactive elements on a webpage is probably going to be interested in this. But anyone who uses the web — all 6 billion and counting of us — will likely experience some of the effects of this release before too long as it spreads to the sites we visit and use daily. And already, some developers are working on more useful features with it, like a custom user-controlled font resizer and letter spacing optimizer for those with dyslexia: With that in mind, perhaps it is not suprising to learn that within 48 hours, the project garnered over 14,000 GitHub stars and 19 million views on X, signaling what many believe to be a foundational shift in how we build the internet. It also demonstrates that AI-assisted coding has moved beyond generating boilerplate to delivering fundamental architectural breakthroughs. For enterprises, this signifies a new era where high-leverage engineering teams can use AI to build bespoke, high-performance infrastructure that bypasses decades-old platform constraints, effectively decoupling product innovation from the slow cycle of industry-wide browser standardization The geometry of the bottleneck To understand why Pretext matters, one must understand the high cost of "measuring" things on the web. Standard browser APIs like getBoundingClientRect or offsetHeight are notorious for triggering layout thrashing. In a modern interface—think of a masonry grid of thousands of text boxes or a responsive editorial spread—these measurements happen in the "hot path" of rendering. If the browser has to stop and calculate layout every time the user scrolls or an AI generates a new sentence, the frame rate drops, the battery drains, and the experience stutters. Lou’s insight with Pretext was to decouple text layout from the DOM entirely. By using the browser’s Canvas font metrics engine as a "ground truth" and combining it with pure arithmetic, Pretext can predict exactly where every character, word, and line will fall without ever touching a DOM node. The performance delta is staggering. According to project benchmarks, Pretext’s layout() function can process a batch of 500 different texts in approximately 0.09ms. Compared to traditional DOM reads, this represents a 300–600x performance increase. This speed transforms layout from a heavy, asynchronous chore into a synchronous, predictable primitive—one that can run at 120fps even on mobile devices. Technology: the prepare and layout split The elegance of Pretext lies in its two-stage execution model, designed to maximize efficiency: prepare(text, font): This is the one-time "heavy lifting" phase. The library normalizes whitespace, segments the text, applies language-specific glue rules, and measures segments using the canvas. This result is cached as an opaque data structure. layout(preparedData, maxWidth, lineHeight): This is the "hot path". It is pure arithmetic that takes the prepared data and calculates heights or line counts based on a given width. Because layout() is just math, it can be called repeatedly during a window resize or a physics simulation without any performance penalty. It supports complex typographic needs that were previously impossible to handle efficiently in userland: Mixed-bidirectional (bidi) text: Handling English, Arabic, and Korean in the same sentence without breaking layout. Grapheme-aware breaking: Ensuring that emojis or complex character clusters are not split across lines. Whitespace control: Preserving tabs and hard breaks for code or poetry using white-space: pre-wrap logic. The hell crawl and the ai feedback loop The technical challenge of Pretext wasn't just writing the math; it was ensuring that the math matched the "ground truth" of how various browsers (Chrome, Safari, Firefox) actually render text. Text rendering is notoriously riddled with quirks, from how different engines handle kerning to the specifics of line-breaking heuristics. Lou revealed that the library was built using an "AI-friendly iteration method". By iteratively prompting models like Claude and Codex to reconcile TypeScript layout logic against actual browser rendering on massive corpora—including the full text of The Great Gatsby and diverse multilingual datasets—he was able to achieve pixel-perfect accuracy without the need for heavy WebAssembly (WASM) binaries or font-parsing libraries. Ripple effects: a weekend of demos The release of Pretext immediately manifested as a series of radical experiments across X and the broader developer community. The original demos showcased by Lou on X provided a glimpse into a new world: The editorial engine: A multi-column magazine layout where text flows around draggable orbs, reflowing in real-time at 60fps. Masonry virtualization: A demo displaying hundreds of thousands of variable-height text boxes. Height prediction is reduced to a linear traversal of cached heights. Shrinkwrapped bubbles: Chat bubbles that calculate the tightest possible width for multiline text, eliminating wasted area. The community response was equally explosive. Within 72 hours, developers began pushing the boundaries: @@yiningkarlli implemented the Knuth-Plass paragraph justification algorithm, bringing high-end print typography—reducing "rivers" of white space by evaluating entire paragraphs as units—to the web. @Talsiach built "X Times," an AI-powered newspaper that uses Grok to analyze images and X posts, using Pretext to instantly layout a front-page reflow. @Kaygeeartworks demonstrated a Three.js fluid simulation featuring fish swimming through and around text elements, with the text reacting to physics at high frame rates. @KageNoCoder launched Pretext-Flow, a live playground for flowing text around custom media like transparent PNGs or videos. @cocktailpeanut and @stevibe demonstrated ASCII art Snake and Hooke’s Law physics with live text reflow. @kho built a BioMap visualization with 52 biomarker blocks performing layout reflow at 0.04ms every frame. Philosophical shifts and the thicker client The response to Pretext was overwhelmingly enthusiastic from frontend luminaries. Guillermo Rauch, CEO of Vercel, and Ryan Florence of Remix praised the library's performance gains. Tay Zonday noted the potential for neurodiverse high-speed reading through dynamic text rasterization. However, the release also ignited a nuanced debate about the future of web standards. Critics warned of "thick client" overreach, arguing that bypassing the DOM moves us away from the simplicity of hypermedia systems. Lou’s response was a meditation on the lineage of computing. He pointed to the evolution of iOS—which started with PostScript, a static format for printers, and evolved into a polished, scriptable platform. The web, Lou argues, has remained stuck in a "document format" mindset, layering scripting on top of a static core until complexity reached a point of diminishing returns. Pretext is an attempt to restart that conversation, treating layout as an interpreter—a set of functions that developers can manipulate—rather than a black-box data format managed by the browser. Strategic analysis: To adopt or wait? Pretext is released under the MIT License, ensuring it remains a public utility for the developer community and commercial enterprises alike. It is not merely a library for making chat bubbles look better; it is an infrastructure-level tool that decouples the visual presentation of information from the architectural constraints of the 1990s web. By solving the last and biggest bottleneck of text measurement, Lou has provided a path for the web to finally compete with native platforms in terms of fluidity and expressiveness. Whether it is used for high-end editorial design, 120fps virtualized feeds, or generative AI interfaces, Pretext marks the moment when text on the web stopped being a static document and became a truly programmable medium. Organizations should adopt Pretext immediately if they are building "Generative UI" or high-frequency data dashboards, but they should do so with a clear understanding of the "thick client" trade-off. Why adopt: The move from O(N) to O(\log N) or O(1) layout performance is not an incremental update; it is an architectural unlock. If your product involves a chat interface that stutters during long responses or a masonry grid that "jumps" as it calculates heights, Pretext is the solution. It allows you to build interfaces that feel as fast as the underlying models are becoming. What to be aware of: Adoption requires a specialized talent pool. This isn't "just CSS" anymore; it’s typography-aware engineering. Organizations must also be aware that by moving layout into userland, they become the "stewards" of accessibility and standard behavior that the browser used to handle for free. Ultimately, Pretext is the first major step toward a web that feels more like a game engine and less like a static document. Organizations that embrace this "interpreter" model of layout will be the ones that define the visual language of the AI era.

Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Related Articles