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 is stealing all the water

off the top of my Greek yogurt.

It's because Cheng Lu, 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 game-changer for UI development.

Ever since Al Gore invented the internet,

rendering dynamic text has had a performance tradeoff.

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,

Cheng Lu 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.

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 onto something big.

Either way, it makes for a good story.

But what exactly makes Pretext so foundational?

Well, Cheng figured out a way to bypass the typical browser text rendering pipeline

that was designed during the Clinton administration

when websites looked 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 Shank 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.

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.

And 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.

Take this one for example.

I know many of you have a hard time watching our sponsored segments.

So I built an app where you can both read the transcript of every

video while you also watch the upcoming sponsored segment.

What's not to love?

Here's how it works though.

First, we run the script through pretext 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 off-screen 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.

Then 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.

The pretext handles the hard part of knowing exactly where every character belongs

and the canvas handles the rest.

It's pretty cool, but whether pretext becomes the foundation Shang Lu 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 JetBrains,

the sponsor of today's video.

You already know about their AI coding agent Genie that's built directly into the

JetBrains IDE.

Well now they just launched Genie CLI so you can use it everywhere.

You just install it from the terminal with one command

and 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've found that Genie is usually able to handle more complex responsibilities than other

coding agents I've tried

and that's largely thanks to IntelliJ IDE's deep understanding of your project's architecture.

I also like how Genie 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.