Pretext fixed the web

Issue #475.April 3, 2026.2 Minute read.
Bytes

Today’s issue: Serverless Geocities, JSON Derulo, and Iambic Pentameter.

Welcome to #475.

Eyeballs logo

The Main Thing

Guy Fieri gasping for air

AI doomers watching the clankers solve a 30-year-old browser issue

Pretext fixed the web

Unless you’ve been touching a lot of grass this week (jealous), you’ve probably already heard about Pretext – the fast, accurate, and comprehensive text measurement library that’s written in pure TypeScript.

It was created by former React Core team member, Cheng Lou who said that he “crawled through the depths of hell” to bring us what he believes will become “one of the most important foundational pieces of UI engineering.” And based on the GitHub star chart alone, it’s clear that a lot of developers agree.

The problem Pretext solves has been around for 30 years: rendering dynamic text on the web has a big performance tradeoff. Whenever 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 is one of the most expensive operations a browser can perform, and it’s unavoidable any time you need to ask for the height of a text element – which you need to do a lot when building things like virtualized lists or masonry layouts.

The solution that Cheng created with Pretext is a two-step API that sidesteps the DOM entirely:

  • prepare() splits your text into segments, measures each one’s pixel width using the Canvas API (no reflow), and caches the results

  • layout() computes line breaks and total height through pure arithmetic at any container width with no browser involvement required

The result is that 1,000 items go from taking ~94ms with 6 dropped frames to ~0.05ms. That’s 500x for my mental math buddies out there, with zero DOM reads. To pull this off, Cheng calibrated the line-break algorithm by running Codex and Claude Code against real browser outputs continuously for weeks.

Bottom Line: It feels pretty weird to see a small TypeScript library outperforming the native browser implementation in one of the most basic UI operations there is. But it makes sense when you realize the browser’s text measurement API was built for rendering, not querying. And it turns out pure math is about 500x cheaper than a layout engine.

Sentry logo

Our Friends
(With Benefits)

Cynthia Erivo awkward smiling

Realizing Claude Code has been writing to the wrong directory for the last two hours

Monitor your Claude Code sessions with Sentry

Claude Code is great until it goes off script. And when that happens, you want to know exactly what it did.

Sentry’s claude-code-sentry-monitor plugin traces every session to give you full visibility. Every tool call (bash, read, grep) shows up as a nested span you can step through.

  • 10-minute setup — Install the plugin, point it at your Sentry DSN, and sessions start appearing in the AI Agents dashboard.

  • Full tool call visibility — Every execute_tool span includes timing and metadata, nested inside the turn that triggered it.

  • Team-level filtering — Tag traces by developer to see what each person’s Claude sessions are actually doing.

Try it out for free.

Cool Bits logo

Cool Bits

  1. Two weeks after building their own Next.js, Cloudflare introduced EmDash – a serverless WordPress successor built on Astro with a focus on plugin security. Build serverless Geocities, you cowards!

  2. TanStack Router shipped a new signal graph to replace router.state. Smaller stores are now the source of truth, rather than one broad state object, leading to faster client-side navigation and a smoother update process.

  3. Orkes is hosting a free workshop on The 4-layer production stack every AI agent needs on April 16th. Learn how real engineering teams are structuring AI infra to move from demos to durable, production-ready systems. RSVP here. [sponsored]

  4. Wes Bos created JSON-Alexander, a marine biologist browser extension that lets you view syntax-highlighted JSON in a collapsible/expandable tree view with level controls. If Wes were 5 years younger he for sure would’ve gone with JSON-Derulo.

  5. Neciu Dan explained how to build your own shimmer skeleton that never goes out of sync.

  6. AI agents write code fast, but who’s checking the screens? This blog post shows you how to build a lightweight QA Agent for Expo apps. [sponsored]

  7. Ibrahim Diallo wrote about how to write documentation that developers will actually read. I’ve found that the trick is to make sure everything is in iambic pentameter.

  8. css-select 7.0 is a CSS selector compiler and engine that’s now ESM only.

  9. Building an AI Security Champions Program is a free live workshop happening on April 9 at 11am ET. It’s hosted by Snyk Staff Developer, Sonya Moisset and will teach you how to enable your team to secure AI-generated code and define success with real KPIs. RSVP now to earn 1 ISC2 CPE credit. [sponsored]

  10. Vue Lynx now lets you develop Lynx with Vue 3. It’s marked as pre-alpha, and the header of the site links to a tweet titled “how I vibed this in 2 weeks.” Always comforting.

  11. Alex MacArthur wrote about your options for preloading images with JavaScript. I’m sure Cheng Lou has a bunch of coding agents locked in a basement working on this somewhere.

  12. Inertia.js 3.0 just came out, and I still remember how a very early Bytes story headline was “Inertia.js is a property of matter.” The jokes have come a long way in five years. Or maybe they haven’t.