Canvas & Ratio
Choose your destination platform format
Layout Template
Choose a content structure for your slides
Preset Themes
Typography & Sizing
Brand Kit Customization
AGENCYConfigure brand assets for headers & footers
Outro Slide CTA
Customize your closing call-to-action slide
Background Pattern
Build Your Carousel
Drag and drop any post card below onto a slide, or use the quick buttons to insert content/images instantly!
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 <a target="_blank" href="https://chenglou.me/pretext/masonry/" color="blue">chenglou.me/pretext/masonr…</a>
2. Shrinkwrapped chat bubbles <a target="_blank" href="https://chenglou.me/pretext/bubbles/" color="blue">chenglou.me/pretext/bubble…</a>
3. Multi-columns magazine layout, but _responsive_ and dynamic <a target="_blank" href="https://chenglou.me/pretext/dynamic-layout" color="blue">chenglou.me/pretext/dynami…</a>
4. Variable font width ASCII art, because why not, it's easy now <a target="_blank" href="https://chenglou.me/pretext/variable-typographic-ascii" color="blue">chenglou.me/pretext/variab…</a>
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 <a target="_blank" href="https://chenglou.me/pretext/accordion/" color="blue">chenglou.me/pretext/accord…</a>
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 <a target="_blank" href="https://github.com/chenglou/pretext" color="blue">github.com/chenglou/prete…</a> `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: <a target="_blank" href="https://chenglou.me/pretext/" color="blue">chenglou.me/pretext/</a> <a target="_blank" href="https://somnai-dreams.github.io/pretext-demos/" color="blue">somnai-dreams.github.io/pretext-demos/</a> 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 <a target="_blank" href="https://x.com/_chenglou/status/2038497396033012131" color="blue">x.com/_chenglou/stat…</a>