Pretext Makes Text Layout 500x Faster

So we have a revolution, yes a revolution in front end. Well, maybe. Command AI It is a very promising library. I have crawled through depth of hell to bring you for the foreseeable years one of the more important foundational pieces of UI engineering if not in implementation then certainly at least in concept. Fast, accurate and comprehensive user land text measurement algorithm in pure type script. Usable for laying out entire web pages without CSS bypassing DOM measurements and reflow. So you know when you have bodies of text on a web page the DOM has to measure the length of the text, the the width, the height, where the text breaks and all the measurements for where these pixels should go. So what he has done is bypassing the DOM and bringing us a like text layout that you can use with this library at 120 frames per second. Let's before going into his use cases, let's show what people have building with it. So this is one of them and we can actually test it. one I wanted to turn it for me. It was quite cool. Yeah. So none of these are things that we couldn't do before just to be clear. It's that we can do them now with accuracy and performance without using the DOM calculations. So right now the DOM doesn't need to calculate where the text goes. It's all done with this library. It is extremely fast and accurate and performance performative. So, here we see a masonry layout with hundreds, if not thousands, of probably thousands of text boxes. Again, at 120 FPS. Why does this matter? This matters because when you have a layout such as this, how do you define how big the scroll uh amount is? How do you define where when you scroll, when when does the the the computer starts rendering, the browser starts rendering the next Do you render everything and show it? That That would mean that you need to have a lot of rendering to do, but if you don't do it, then how do you guess the the the the height? You can't. So, you can't unless you do the rendering, which is really performance intensive, even though it is text, but it is performance intensive. Um but now he he does it with something like this, which is so impressive. This is impressive, especially like imagine um with the interfaces we have. I don't know if you have noticed it or not, but even in ChatGPT, if you have a long conversation, it becomes extremely laggy. It becomes so laggy to just scroll. It is partially because of uh the browser is trying to understand the height of this text. And especially if you resize things, the browser has to calculate everything again. But this bypasses that DOM calculation entirely. Here there is this really interesting uh example, and this is where my brain broke for a second. I I I I was doing this and I I I was thinking like, "Why can't he do this with CSS text pretty?" Sure. Again, I I'm not the developer here. So, I was looking at precisely, let me show you. Look at this. Oh, wait, it handles this, you know, this text. This is done with pre-text. This is done with CSS. And I was like, "Why can't you do this with CSS text pretty?" You know, you you can you can do this. Uh, but I I was completely forgetting or like I didn't understand before testing it. I did start testing it. You can break the lines and have the text to look like this with text-wrap pretty, but you don't know the box size. Like, you cannot make the box size to be what the text inside is. With CSS, it's not aware of that. So, you have a lot of wasted pixels. You have this layout with this wasted pixels, where with pre-text it's all calculated. And by the way, he did this by uh, doing tons of calculations with agents running on multiple browsers for multiple weeks. So, that's also quite impressive. And here is another use case. And a lot of people, by the way, so far you probably see this and you're like, "Why are you making text unreadable?" That's not the point. It's not about making it unreadable. It's about creating any layout with like high performance without the need to to do all that calculation, all that measurement. All of this is just a a showcase of what is possible. Um we have another cool showcases uh before I read that that one. So, here we have a 3D model that is moving and doing all the recalculations automatically. Again, these are not practical things. These are more like the just a just to showcase the performance. I I found this tweet also explaining it fairly well. So, let's go through it. Let me explain the importance of this. An engineer solved a problem that's been plaguing the internet for three decades. Every website you've ever used relies on a text layout system from the nine 1990s. The browser loads a font, measures text, figures out where lines break, and positions everything vertically. Every step depends on the previous one. Every step forces the browser to pause and recalculate. You've felt this problem plenty times before even if you didn't know what caused it. Slack's scroll jumping when message heights are wrong. Google Docs getting slow on long documents because every keystroke recalculates everything below your cursor. AI chat apps getting junky when streaming uh because each new token can cause a line wrap that shifts the entire page. Same root cause every damn time. Text measurement is locked inside the browser's DOM. It's slow and and there's been no alternative for 30 damn years. Pretext bypasses all of it. Pure TypeScript text measurement, no DOM, no CSS, no browser reflow. You give it a You give it text, a font, and a width. It returns exact line breaks, width, and heights using pure math. Around 500 times faster in many cases than the standard approach. Supports every language. That's very interesting, including mixed bidirectional text. I do this all the time, by the way. I do this all the time in my texting. Um and it's broken. This is broken on every single app ever. Uh CJK, I don't know what that means, Arabic, and emojis. The engine is 15 kilobytes, built and validated by running Claude code and codecs against browser uh ground truth for weeks. The demos are wild. Hundreds of thousands of text boxes virtualized at 120 uh frames per second, no DOM measurement. Shrink-wrapped chat bubbles with zero wasted pixels, something CSS literally cannot do. Responsive multi-column magazine layout that reflow dynamically, uh variable font, ASCII art. It's just a byproduct of this. Uh you can do ASCII art with variable font. Uh over the years, developers moved rendering to canvas, scrolling to custom uh implementation, positioning to JS, but text was the one thing you couldn't move out of the browser. It was the last piece locked inside of the DOM with no alternative. Now we have a solution. This was built by Changlu, one of the foundational developer behind React, Facebook Messenger, and Midjourney. He's not just anyone, lol. Uh If you build anything on the web, this now changes what's literally possible. This unlocks new UI patterns, layout interfaces, and experiences like we've never seen before. Go look at the demos in the quote post. It's open source NPM install, insane. These are all running in a browser. The future of design is still to come. Yeah, this is very optimistic. This is saying it is going to be huge, and the examples people are making are big. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI