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
VIDEO
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:
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…
VIDEO
4. Variable font width ASCII art, because why not, it's easy now chenglou.me/pretext/variab…
VIDEO
VIDEO
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…
VIDEO
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 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
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!
`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!
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
For immediate benefits, see
View Tweet
Generated by Thread Navigator
Press ⌘ + S to quick-export