Pretext unlocks 120 FPS interfaces by sidestepping layout reflows

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…

3 min readInfoQ
Pretext unlocks 120 FPS interfaces by sidestepping layout reflows

If you have spent any time building rich interfaces on the web, you know the pain of fighting the browser's layout engine. Every time you want to measure a line of text or anchor a scroll position, the DOM forces a synchronous reflow that turns a smooth interaction into a stutter. Cheng Lou's new open-source library, Pretext, is a direct challenge to that constraint. It measures and lays out text without triggering browser layout reflows, and that is a bigger deal than the 15KB size suggests.

The practical payoff is immediate for anyone working with complex data-dense UIs. Infinite lists, masonry grids, and scroll anchoring have always required either a virtualized fallback or a lot of expensive DOM reads and writes. Pretext sidesteps the bottleneck entirely by doing the layout math in TypeScript, outside the browser's rendering pipeline. That means you can build interactions that were previously too costly to run at 60 frames per second, let alone 120. For developers who have been forced to choose between visual fidelity and performance, this is not a minor optimization. It is a new baseline.

What is particularly interesting is how Pretext was built. Lou reverse-engineered the DOM's layout calculations using an AI loop, which means the library is not approximating text metrics with heuristics. It is replicating the underlying behavior of the browser's own engine. That is a meaningful distinction. It suggests that the gap between what the browser gives you for free and what you can compute yourself is narrowing. You are not being asked to trade accuracy for speed. You are being handed a tool that matches the system it replaces, but without the performance tax.

Our take is straightforward: this is the kind of tool that quietly removes a ceiling you did not realize you were hitting. The next time you are debugging a janky infinite list or a masonry layout that refuses to stay smooth, you do not need a faster machine or a more aggressive virtualizer. You need a better way to measure text. Pretext is that way, and it is already open source. Start experimenting with it on your most layout-heavy components. That is where the real transformation happens, not in the abstract promise of speed, but in the concrete relief of a scroll that finally stays at 120 frames per second.

From InfoQ

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.

Read the original at InfoQ