He just crawled through hell to fix the browser…
Chapters8
Explains why traditional text rendering is expensive and how pretext aims to improve text measurement for UI components.
Changlu’s pretext breaks the CPU-bound text measurement nightmare, letting you compute text layout with canvas and a custom algorithm—no DOM reflows needed.
Summary
Firebrush’s channel host dives into pretext, a groundbreaking text-measurement library from Changlu, a former React core team member and Midjourney engineer. The piece explains how pretext bypasses the browser’s traditional text rendering pipeline by using the canvas API to measure width and a bespoke line-break algorithm for height, all without triggering layout reflows. Firebrush highlights the heavy engineering and “recursive hellscape” involvement behind building reliable, cross-browser line-breaking rules. Changlu’s work promises dramatically faster UI components that depend on accurate text metrics, such as virtualized lists and masonry layouts, by removing the DOM-touching overhead. The host walks through a practical example of how pretext could power a chat app with a 10,000-message scrollable view, showing how the library caches segment widths and computes total height via a layout call. The segment then demonstrates an offscreen canvas technique to render video as a brightness-based character grid, illustrating pretext’s potential for creative UI optimization beyond traditional text rendering. The sponsor segment shifts to JetBrains, introducing Juny CLI as an AI coding assistant that complements this new era of faster, smarter tooling in IDEs. Overall, the video blends exciting claims about foundational UI engineering with a tongue-in-cheek demo, inviting viewers to test pretext’s real-world performance gains while considering the practicalities of integrating such a library.
Key Takeaways
- Pretext uses the canvas API to measure string width without triggering DOM reflows, avoiding the traditional layout bottlenecks.
- The library incorporates a custom cross-browser line-break algorithm to accurately determine text height without relying on the browser’s layout engine.
- A practical example shows a 10,000-message chat view where pretext enables precise height calculation for virtualized lists.
- The API is intentionally simple: prepare text into segments with cached widths, then call layout to obtain total height and line count.
- Changlu collaborated with specialists (the “clankers”) to test line-break rules across browsers and languages, iterating for weeks.
- The demonstration app renders video as a brightness-based ASCII-like grid by combining pretext’s text layout with a canvas-based render, illustrating novel UI techniques.
- JetBrains released Juny CLI, an AI coding agent that adapts models to tasks and can be installed via a single terminal command.
Who Is This For?
Essential viewing for frontend engineers and UI architects who build performance-critical text-heavy interfaces (virtualized lists, chat UIs, or masonry layouts) and want to understand foundational text measurement improvements. Also relevant for developers curious about AI-assisted tooling like JetBrains Juny in modern IDEs.
Notable Quotes
"What Chang figured out is that you don't actually need to ask the browser for text dimensions at all."
—Explains the core insight behind pretext and its departure from traditional browser rendering.
"He'd have them write the line break logic, then test it against actual text in actual browsers and compare the results."
—Describes the collaborative, iterative process used to build reliable line-breaking rules.
"The end result is a surprisingly simple API. You first prepare your text... then you call layout, which gives you the total height and line count."
—Summarizes the basic API surface and its practical payoff.
"I built an app where you can both read the transcript of every video while you also watch the upcoming sponsored segment."
—Demonstrates a creative, real-world use case leveraging pretext in a UI.
"Whether pretext becomes the foundation Changlu thinks it will or not, at the very least, it's proof that the browser doesn't have to own text measurement anymore."
—Frames the broader impact of the library on web rendering.
Questions This Video Answers
- How does pretext avoid DOM reflows for text measurement in practice?
- What makes the pretext API simple yet powerful for virtualized lists?
- Can I render video as a brightness-based character grid using a text-layout library?
- What is Juny CLI and how does it enhance coding in JetBrains IDEs?
- What are the cross-browser challenges in line-breaking rules and how were they addressed?
pretexttext measurementcanvas APIline breaking algorithmvirtualized listsmasonry layoutReact MotionChangluJetBrains JunyJuny CLI
Full Transcript
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.
More from Fireship
Get daily recaps from
Fireship
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.



