Cheng Lou, a Midjourney engineer and former React core team member, recently released Pretext, a 15KB open-source TypeScript library that measures and lays out text without touching the DOM. This approach eschews expensive 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.
For consumer-driven (e.g., B2C) applications, the end-user experience is a major driver of differentiation and adoption. Web applications have long used advanced UI/UX patterns such as masonry layouts (e.g., Pinterest, Tumblr), virtual list scrolling (e.g., X, formerly Twitter), and scroll position anchoring. Some of these patterns are being normalized into CSS standards like CSS Grid for masonry and overflow-anchor, though browser support varies. Any custom, JavaScript-based implementation of these patterns is vulnerable to layout thrashing and its associated performance costs.
When an application needs to calculate the height of text—such as for virtualized lists with thousands of items, masonry grids, or continuous streaming AI chat interfaces—it traditionally queries the Document Object Model (DOM) using commands like getBoundingClientRect or offsetHeight. The browser responds by triggering a layout reflow, forcing its rendering engine to recalculate the geometry and position of every element on the page. On heavy pages or with tight rendering budgets, reflow leads to frame drops and sluggish interfaces.
Pretext.js eschews reflow entirely. The tool operates in two distinct phases. The prepare() phase uses the Canvas API’s measureText() to analyze text and determine the pixel width of every segment (based on font, spacing, and Unicode rules) independently of the DOM. These results are then cached. The prepare() cost is paid once. The layout() phase then uses pure arithmetic on these cached widths to derive the total line count and final height based on the container size. layout() is the hot path that may be called as often as needed to reflect changes in the container’s dimensions. Neither phase reads from the DOM, thus causing no expensive reflows.
According to multiple performance tests shared by the community, a single layout operation on 500 blocks of text takes approximately 0.09 milliseconds with Pretext, making it up to 600 times faster than traditional DOM-based methods. This makes it easier for applications to maintain 120 frames per second, even when users manipulate elements that require text to wrap dynamically in real-time.
Interestingly, Lou explains that AI played a major role in the successful multi-language implementation of the library:
The engine is tiny (a few KB), aware of browser quirks, and supports all the languages you’ll need, including Korean mixed with RTL Arabic and platform-specific emojis. This was achieved by showing Claude and Codex the browser’s ground truth and having them measure and iterate against those results at every significant container width, running over a period of weeks.
This method, using working software as an oracle for verification, illustrates the potential of autonomous AI loops. Recently, sixteen Claude agents built a C compiler that passes 99% of gcc tests. While that compiler is not production-grade, it required merely two weeks of work and minimal human intervention.
Developers have reacted with overwhelming positivity to the release. The repository gained 16,000 GitHub stars within 24 hours of the announcement. Developers have already begun applying the tool to interfaces previously considered too heavy for the web, as highlighted by Simon Willison on his blog, where he detailed the library’s ability to recreate professional-grade print typography on the web.
One designer said:
There’s always been a gap between what print designers do and what web designers are allowed to do. It mostly comes down to text. I have been completely obsessed with these beautiful Pretext demos, and have collected some of my favourites.
[…] For graphic designers it means using text on the web with the same flexibility you get in print.
Interested developers can review the many available demos and use cases, such as variable-height virtual scroll, dynamic AI chat bubbles, and a multilingual content feed. Those inclined toward mathematics and typesetting can also review an interactive comparison of justification algorithms, pitting Pretext against the Web’s standard and the Knuth-Plass algorithm (used in the famed TeX/LaTeX typesetting system).