The front-end community is in an uproar. Claude has created a 15KB engine, with a rendering speed that has skyrocketed by 1,200 times: You can play Mario within text.

[Introduction] The frontend circle has witnessed a significant change! A master from Midjourney has taken action, and the open - source Pretext has become an instant sensation overnight, emerging as a savior for web page layout and completely resolving a 30 - year - old UI problem. Now, 16 million people across the web are watching and going crazy about it.

The 30 - year "hell - level" shackles of web page layout have been broken!

Today, the frontend circle has been completely ignited by a project named Pretext, attracting 16 million people to watch it like crazy.

It has completely overturned the DOM rendering mechanism that has dominated web pages for 30 years, achieving what was previously considered an "impossible" feat -

Text flowing freely along any shape, automatic distribution across columns, and smooth adaptation of multi - dimensional layout

Even more astonishingly, Pretext has skyrocketed the web page layout speed by hundreds of times, providing an ultimate smooth rendering experience of up to 120 frames per second.

This incredibly popular project is precisely the work of Cheng Lou, a frontend engineer at Midjourney.

In the exact words of the master, "I've just climbed out of the depths of hell and brought back one of the most important cornerstones for UI design in the coming years for you."

At this moment, the entire web is immersed in the visual feast of Pretext. Those directly generated layout demos are so beautiful that they hardly seem like web pages.

The comment section below is completely flooded with expressions of amazement.

The Popular Pretext Project Ends the 30 - Year Dilemma in UI

Without exaggeration, the emergence of Pretext has personally untied the dead knot that has confined the frontend imagination for a full 30 years.

All along, traditional text measurement has been extremely dependent on CSS and DOM Reflow, with performance as heavy as lead and often causing glitches.

In the browser world, 3D, animations, and WebGL can be used in a dazzling way.

However, once it comes to large - scale text rendering, developers have to "stall" immediately and humbly compromise to the DOM black box.

Suppose you want to know how tall a passage of text is when put into a 300px box. There is no direct way to calculate it.

You have to force the text into the DOM tree, let the browser lay it out honestly, and then "ask" for the result using getBoundingClientRect().

This inquiry process is called - Reflow, the "number one culprit" of web page glitches.

Moreover, this kind of measurement cannot be done in parallel and must be processed in sequence. Carelessly, it can cause read - write interleaving, leading to a complete collapse of performance.

To solve this problem, the master Cheng Lou adopted the most radical way to break the deadlock -

Abandon the existing tools and self - develop a high - precision, ultra - fast text measurement engine in the user space using pure TypeScript.

Don't touch the DOM and don't seek help from the browser. Just calculate violently.

GitHub address: https://github.com/chenglou/pretext

How did he do it?

Cheng Lou found a "back door": The browser's canvas.measureText() and DOM rendering use the same font engine at the underlying level.

But the beauty of canvas is that it runs completely outside the layout tree, and measuring text any number of times will not trigger Reflow.

The entire logic of Pretext is built on this breakthrough point.

It first measures each text segment using canvas and caches the width. Then, no matter how you stretch the window or switch the layout, all the layout calculations are just addition, subtraction, multiplication, and division.

Netizens' sharp comments: Pretext is the "new - generation OpenClaw", and its GitHub stars have exceeded 11k in just a few days after its release.

To polish the precision to the extreme, Cheng Lou fed all the "real rendering benchmark" data of major browsers to Claude Code and Codex.

Then he let them measure and iteratively compare at each critical container width, and the whole process took several weeks.

Unexpectedly, the experimental results were astonishing.

In terms of precision, in 7680 exhaustive tests of the three major browsers Chrome, Safari, and Firefox, all passed with full marks, with pixel - level consistency.

The performance data is even more explosive.

• On Chrome, the layout() of Pretext takes 0.09 milliseconds, while the traditional DOM interleaved measurement takes 43.50 milliseconds, 483 times faster.
• On Safari, it's even more exaggerated. The layout() takes 0.12 milliseconds, and the DOM interleaved measurement takes 149.00 milliseconds, more than 1242 times faster - a full three orders of magnitude.

In the demonstration, it can handle the scrolling and zooming of hundreds of thousands of text boxes at a smooth frame rate of 120fps.

Without the need for DOM measurement, the visible area check is simplified to a single, uncached linear traversal of the height.

It can also make chat bubbles perfectly fit the text content - automatically calculating the most compact wrapping width without an extra pixel.

This ability of "shrinking and wrapping" multi - line text has been missing on the web for a full 30 years.

There are also dynamic responsive multi - column magazine layouts, ASCII art with variable - width fonts, manual rich - text layout, etc.

Those challenges that used to be CSS nightmares - self - adaptive height text fields, collapsible panels, centering of multi - line text, and multi - line text rendering with pure Canvas - are now all trivial in the face of Pretext.

It's worth mentioning that although this engine is only 15KB, it has a deep understanding of all kinds of quirky browser features.

It supports various languages, including Korean, right - to - left written Arabic, and platform - specific emojis.

The Whole Web Is Going Crazy, with Incredibly Creative Ideas

The master Cheng Lou just started the ball rolling, and the creative ideas of developers across the web when trying it out are truly amazing.

Even the father of Pretext himself was stunned.

Netizens measured that it only takes 0.04 milliseconds to complete 52 layouts.