Introduction

The front-end development community has been set ablaze by a project named Pretext, attracting 16 million viewers overnight.

This project has overturned the 30-year dominance of the DOM rendering mechanism, achieving what was previously deemed impossible:

Text flows freely in any shape, automatic column distribution, and smooth multi-dimensional layout adaptation.

Even more astonishingly, Pretext has increased web typography speed by hundreds of times, achieving a rendering experience of up to 120 frames per second.

This popular project was created by Cheng Lou, a front-end engineer at Midjourney. In his own words, “I just crawled out of hell and brought back one of the most important cornerstones for UI design in the coming years.”

Currently, the internet is immersed in the visual feast that Pretext offers, with demos showcasing layouts that hardly resemble traditional web pages.

The Breakthrough of Pretext

It is no exaggeration to say that the emergence of Pretext has untangled a knot that has constrained front-end imagination for 30 years.

Traditionally, text measurement has heavily relied on CSS and DOM Reflow, resulting in performance issues that feel as heavy as lead.

In the world of browsers, 3D, animations, and WebGL can flourish. However, once large-scale text rendering is involved, developers face immediate limitations, having to compromise with the DOM black box.

For instance, if you want to know how tall a paragraph is when squeezed into a 300px box, there is no direct way to calculate it. You must force the text into the DOM tree, let the browser render it, and then use getBoundingClientRect to retrieve the result.

This inquiry process is known as Reflow, which is the number one culprit behind web performance issues.

Moreover, this measurement cannot be parallelized and must be processed sequentially, leading to potential read/write interleaving and performance crashes.

To solve this problem, Cheng Lou adopted a radical approach:

He abandoned existing tools and developed a high-precision, high-speed text measurement engine using pure TypeScript in user space.

No DOM interaction, no browser assistance, just brute-force calculations.

GitHub link:

https://github.com/chenglou/pretext

How It Works

Cheng Lou discovered a “backdoor”: the canvas.measureText and DOM rendering use the same underlying font engine. However, the canvas operates entirely outside the layout tree, meaning that measuring text does not trigger Reflow.

The entire logic of Pretext is built on this breakthrough. It first measures each text segment using the canvas, caches the widths, and then performs layout calculations using simple arithmetic regardless of window resizing or layout switching.

Users have commented that Pretext is the “next-generation OpenClaw,” with over 11,000 stars on GitHub within just a few days.

To refine the accuracy, Cheng Lou fed real rendering benchmark data from major browsers to Claude Code and Codex, allowing them to measure and iterate comparisons at every critical container width over several weeks. The results were astonishing.

In terms of accuracy, all 7680 exhaustive tests across Chrome, Safari, and Firefox passed with flying colors, achieving pixel-perfect matches.

Performance data is equally impressive:

• In Chrome, Pretext’s layout time is 0.09 milliseconds, while traditional DOM interleaved measurement takes 43.50 milliseconds, making it 483 times faster.
• In Safari, the layout time is 0.12 milliseconds, compared to 149.00 milliseconds for DOM interleaved measurement, achieving over 1242 times speed improvement.

During demonstrations, it can handle scrolling and resizing of tens of thousands of text boxes at a silky 120fps.

No DOM measurement is needed; visual area checks have been simplified to a single, non-cached linear traversal of height.

It can also perfectly fit chat bubbles to text content—automatically calculating the most compact wrapping width without any extra pixels.

This capability of multi-line text “shrink wrapping” has been missing on the web for 30 years.

Additionally, it supports dynamic responsive multi-column magazine layouts, variable-width ASCII art, and rich text manual typesetting, among others.

Challenges that were once nightmares in CSS—adaptive height text areas, collapsible panels, multi-line text centering, and pure canvas multi-line text rendering—are now trivial in the face of Pretext.

Notably, this engine, despite being only 15KB, understands various browser quirks and supports multiple languages, including Korean, right-to-left Arabic, and platform-specific emojis.

The Internet Goes Wild

Cheng Lou has only scratched the surface; the creativity of developers experimenting with Pretext is astounding.

Even the creator of Pretext himself is amazed.

Users have reported that it takes just 0.04 milliseconds to complete 52 different layouts.

Text with Animated Characters

A large number of users have created character animations within text rendering. Imagine watching a movie while reading a book.

Characters from “Kaguya-sama: Love Is War” jump into the text, with their signature dance steps paired with real-time flowing layouts, merging the two-dimensional with reality.

Some users have become so engrossed that they’ve stayed up all night creating a Pretext version of “Bad Apple.”

Super Mario in Text

Others have created effects resembling the “Super Mario” game, complete with background music.

“Doom” can also be successfully run.

Various games like Breakout and Snake have also inspired creative gameplay.

Designer Marius Hauken has transformed text into a “fluid” medium, and the results are nothing short of stunning.

Physics in Typography

Some have incorporated physical laws into text layout, visualizing gravity, collisions, and elasticity, making dull formulas come to life on screen.

Applying this effect in children’s picture books allows text to flow around illustrations, making page-turning feel like a game.

And there are countless other crazy demonstrations:

Standing on the Shoulders of Giants

Creating Pretext is no small feat. Cheng Lou’s resume weaves through much of the history of front-end evolution.

As the creator of React Motion, the founder of ReasonML/ReScript, and a core architect of Facebook Messenger’s front-end, he is now supporting the entire UI system at Midjourney using Bun.

However, the spark for Pretext predates him. Ten years ago, Sebastian Markbage from the React core team wrote an experimental project called text-layout:

Using canvas measureText for text shaping, borrowing pdf.js’s bidi algorithm for handling bidirectional text, and flowing line breaks.

The architectural framework of Pretext is derived from this.

In a 2016 talk at ReactEurope, Cheng Lou quoted a line that has been frequently referenced: reducing expressiveness can yield greater power.

Ten years later, he has validated this statement—by eliminating the DOM, typography has become freer.

A core member’s experimental spark has been ignited into a roaring fire by another core member a decade later.

This is Just the Beginning

In Cheng Lou’s view, Pretext is not just a foundational breakthrough in UI engineering, but a paradigm shift at the architectural level.

Today, browser standards have expanded to a point where new competitors find it nearly impossible to enter the market.

To fundamentally enhance UI performance and developer experience, the only way forward is to return more capabilities to user space—

Allowing developers to control typography themselves, rather than waiting for the CSS committee to discuss the next decade’s feature drafts.

This signifies that web UI will break free from the constraints of traditional CSS and enter a more imaginative era of Canvas/GPU rendering.

Cheng Lou concluded his thoughts with a single statement:

The cost of verifiable software will approach zero.

This may be the true message that Pretext aims to convey.