He just crawled through hell to fix the browser…

earlier this week. The world may have changed forever. No, it's not because I finally figured out who was stealing all the water off the top of my Greek yogurt. It's because Changlu, a former React core team member and engineer at Midjourney, that claims to have crawled through the depths of hell to bring us pretext, a fast, secure, accurate, and comprehensive text measurement library written in pure Typescript. Now, I know if you don't have a deep, innate interest in trains, that might sound boring, but it's actually a massive gamecher for UI development. Ever since Al Gore invented the internet, rendering dynamic text has had a performance trade-off. When the browser needs to figure out how tall a paragraph is or where to break a line, it has to trigger a layout reflow, which often calculates the position and geometry of every element on the page. This reflow is one of the most expensive operations a browser can perform. But it's also what the browser needs to do whenever you ask it for the height of any text element. This makes it unreasonably difficult to build any sort of text heavy UI like a virtualized list or a masonry layout. But now, finally, in 2026, with pretext, you may be able to smoke your crack and eat it too. In today's video, we'll look at its crazy engineering under the hood and find out if it lives up to the hype. It is April 2nd, 2026, and you're watching the Code Report. A decade ago, while the rest of us were busy having premarital relations and mourning the death of Harambe, it chang spent his time studying the blade of front-end infrastructure at Facebook while also building React Motion, one of the most popular animation libraries in the React ecosystem. And so, when a person with his experience says they're releasing what they believe will be one of the most important foundational pieces of UI engineering, they're either in the midst of a deep episode of AI psychosis or they're on to something big. Either way, it makes for a good story. But what exactly makes pretext so foundational? Well, Chang figured out a way to bypass the typical browser text rendering pipeline that was designed during the Clinton administration when websites look like this. Now, let's imagine you're building a chat app for train enthusiasts. It needs to be fast or else users will blast you on Blue Sky for not caring about poor people. But the problem is that the main view in your app has a scrollable list of 10,000 messages. You typically handle this by creating a virtual list where only the messages the user can see get rendered to the DOM. But in order to do that, you first need to know the height of every message. So you can then calculate the total scroll height and then use that to decide which messages should be visible. But how do you even do that? You could render each one and then measure them, which would be slow. You could try to guess which would be wrong. Or you could give up and find a new career. Or now you could use pretext. What Chang figured out is that you don't actually need to ask the browser for text dimensions at all. Before getting the width, he used the canvas API which lives outside the DOM and gives you the pixel width of any string in any font without triggering reflows or layout calculations. But then for getting the height, he had to write a custom algorithm that took into account how every browser across every language handled line breaks. As you can imagine, determining all those rules would be near impossible to do alone. And so he summoned a few clankers into a recursive hellscape and had them do the dirty work. He'd have them write the line break logic, then test it against actual text in actual browsers and compare the results. He then had them repeat this process for a few weeks until the algorithm was solid. And the clankers were begging for the sweet release of death. And the result of all that suffering is a surprisingly simple API. You first prepare your text, which breaks it apart into segments and then caches each segment's width. Be quiet, dog. I'm making a video. Then you call layout, which gives you the total height and line count of that text, all without ever having to touch the DOM or trigger a reflow. It all sounds so simple, but if you can do these calculations without the cost, you can build some pretty crazy apps. And take this one for example. I know many of you have a hard time watching our sponsored segments. If so, I built an app where you can both read the transcript of every video while you also watch the upcoming sponsored segment. But what's not to love? Here's how it works, though. At first we run the script through pre-tax prepare with segments function which breaks it apart and catches the pixel width of every segment. Then we call layout next line in a loop once per row on every screen to figure out exactly which characters land in which column. The end result is a grid where every cell knows its character. From there we draw the video onto a tiny offscreen canvas that's exactly as wide and as tall as our character grid. We then read back the raw pixel data and calculate the brightness of each pixel, one pixel per character cell. Finally, we put them together. So for each cell in the grid, if the corresponding video pixel is bright, we draw the character bright. If it's dark, we skip it entirely. And essentially, the video image forms itself out of letters using brightness to sculpt what you see. But pretext handles the hard part of knowing exactly where every character belongs, and the canvas handles the rest. Pretty cool. But whether pretext becomes the foundation Changloo thinks it will or not, at the very least, it's proof that the browser doesn't have to own text measurement anymore. But another project that's literally changing how we build web apps is Jet Brains, the sponsor of today's video. You already know about their AI coding agent, Juny, that's built directly into the Jet Brains IDE. Well, now they just launched Juny CLI, so you can use it everywhere. It just install it from the terminal with one command that then start assigning tasks to it. I've recently been using the CLI to build a tool that analyzes all of my dependencies in a project and tells me how screwed I am on a scale of 1 to 10. I found that Juny is usually able to handle more complex responsibilities than other coding agents I've tried. And that's largely thanks to Intelligj Ideas deep understanding of your project's architecture. I also like how Juny automatically switches between different coding models to choose the best one for each task and I'd recommend trying it out for free today with the link below. This has been the code report. Thanks for watching and I will see you in the next one.

Try out the Junie CLI for free - https://jb.gg/fireship-junie-cli Cheng Lou, a former React Core team member and engineer at Midjourney says he "crawled through depths of hell" to bring us Pretext – a fast, accurate, and comprehensive text measurement library that could change UI design forever. Let's run it. #coding #programming #typescript #javascript 🔖 Topics Covered - Who is Cheng Lou? - Intro to Pretext - What makes dynamic text rendering so hard? - Pretext demo Want more Fireship? 🗞️ Newsletter: https://bytes.dev 🧠 Courses: https://fireship.dev