@_chenglou: My dear front-end developers (...

My dear front-end developers (and anyone who’s interested in the future of interfaces):

I have crawled through depths 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 userland text measurement algorithm in pure TypeScript, usable for laying out entire web pages without CSS, bypassing DOM measurements and reflow

Text layout & measurement was the last & biggest bottleneck for unlocking much more interesting UIs, especially in the age of AI

With this solved, no longer do we have to choose between the flashiness of a GL landing page, vs the practicality of a blog article. Demos:

1. Occlusion (virtualization) of hundreds of thousands of text boxes, each with differing height, without DOM measurement, therefore simplifying the visibility check to a single linear cache-less traversal of heights, scrolling & resizing at 120fps chenglou.me/pretext/masonr…

2. Shrinkwrapped chat bubbles chenglou.me/pretext/bubble…

3. Multi-columns magazine layout, but _responsive_ and dynamic chenglou.me/pretext/dynami…

4. Variable font width ASCII art, because why not, it's easy now chenglou.me/pretext/variab…

5. Your typical auto-growing text area, accordion, multi-line text centering, pure canvas multiline text, and all other things that used be real CSS challenges, now reduced to a boring footnote chenglou.me/pretext/accord…

The engine’s tiny (few kbs), aware of browser quirks, supports all the languages you’ll need, including Korean mixed with RTL Arabic and platform-specific emojis

This was achieved through showing Claude Code and Codex the browsers ground truth, and have them measure & iterate against those at every significant container width, running over weeks

This paradigm is significantly more performant (~500x, but it's an unfair comparison; read on) than laying out text and messily crawl out the measurements through getBoundingClientRect(), which causes DOM read/write interleaving, one of the most expensive operations on the web

In the past, such measurement also had to be batched, which wrecked the programming model of having UI components boundaries in the first place. The best perf gains come from architectural shifts! Measurements are actively tracked in the repo

Project’s at github.com/chenglou/prete…
`npm`/`bun install @chenglou/pretext` and throw your AI into making cool demos for it!

Fun glossary of demos. Some useful, some purely showing off:
chenglou.me/pretext/
somnai-dreams.github.io/pretext-demos/
Will keep adding more!

🚨 Hello! This post reached beyond its original audience. If you're wondering why you'd want dancing balls while reading: you don't. It's a demo to showcase the expressivity & performance of the system for designers & engineers
For immediate benefits, see

View Tweet