A curated collection of demos, projects, tips, tutorials, and news for Pretext — the DOM-free text layout engine by Cheng Lou that's 500x faster than browser layout.
Pretext is a 15KB, zero-dependency TypeScript library that measures and positions text using Canvas with pure-arithmetic reflows. No DOM, no WASM — just math.
Last auto-updated: 2026-04-06 (via /awesome-pretext-update)
- Demo Gallery
- Demos
- Community Projects
- Tutorials
- Articles & Blog Posts
- Videos & Talks
- Integrations
- Boilerplates & Starters
- Real Apps
- Benchmarks & Performance
- News
- People to Follow
- Related Projects
Official Demos Accordion, bubbles, dynamic layout, ASCII art |
Pretext Breaker Breakout game where bricks are made of text |
Tetris x Pretext Classic Tetris with Pretext-powered text layout |
Illustrated Manuscript Medieval manuscript with animated dragon and live reflow |
Dragon Through Text The viral dragon animation flowing through paragraphs |
Bad Apple!! ASCII Shadow art PV as real-time ASCII animation |
| Demo | Author | Description | Repo |
|---|---|---|---|
| Bad Apple!! ASCII | frmlinn | The legendary Bad Apple!! shadow art PV as real-time ASCII text animation |  |
| Pretext Playground | 0xNyk | Interactive ASCII dragon, physics-driven letters, fire breathing, 3D text tunnel |  |
| Pretext Breaker | rinesh | Breakout-style arcade game where bricks are made of text, with sound effects |  |
| Tetris x Pretext | shinichimochizuki | Classic Tetris reimagined with Pretext-powered text layout |  |
| Somnai Pretext Demos | somnai-dreams | Five polished demos: editorial engine, fluid smoke ASCII, justification comparison |  |
| PreText Experiments | qtakmalay | Eleven demos including Dragon animation, Anime Walk, Masonry layout |  |
| Demo | Author | Description | Repo |
|---|---|---|---|
| Pretext Explosive | SamiKamal | Text that shatters — explosive particle effects powered by Pretext layout |  |
| Star Wars Crawl | berryboylb | The iconic opening crawl recreated with perspective text animation |  |
| Singularity & Liquid Grid | progrmoiz | Black-hole text singularity, liquid dashboard grid, and draw-to-fill text vessels |  |
| Drag Sprite Reflow | dokobot | Drag a sprite across text and watch paragraphs reflow in real time |  |
| Responsive Testimonials | jalada | Auto-sizing testimonial quotes that adapt to container width |  |
| Alarmy Editorial Clock | SmisLee | Multi-column editorial layout flowing around an animated analog clock |  |
| Demo | Author | Description | Repo |
|---|---|---|---|
| Illustrated Manuscript | dengshu2 | Medieval illuminated manuscript with animated dragon and live text reflow |  |
| Text Flow Demo | MaiMcdull | News-style flowing text layout with a comparison shim for benchmarking |  |
| Sea of Words | Mukul-svg | Words flowing as ocean waves with wrap geometry in a canvas scene |  |
| World Model Test | CharlieGreenman | Minimal world-model interface powered by DOM-free text measurement |  |
| Face x Pretext | sachinkasana | TensorFlow.js face tracking drives real-time Pretext typography |  |
| DOM vs Pretext | clawsuo-web | Side-by-side performance comparison between DOM layout and Pretext |  |
| Demo | Author | Description | Repo |
|---|---|---|---|
| TypeBeat | Alexander Chen | A drum machine entirely made of text — each character triggers a sound. Built with Pretext + Gemini. | X post |
| Typexperiments | pablostanley | Kinetic typography engine — smooth per-character text animations on Canvas |  |
| BioMap | Kevin Ho | 52 biomarker blocks that expand and reflow text every frame — 0.04ms for all 52 layouts | X post |
| Pretext Wars | jameslcowan | Space-themed game — destroy poetry with your spaceship |  |
| Pretext Slides | ShipItAndPray | Presentation tool rendering slides in Canvas with Pretext — write markdown, present anywhere |  |
| Pretext Lab | XergioAleX | Interactive playground — drag width sliders, masonry grids, chat bubbles, text flow around shapes | site |
- Official Pretext Demos — Accordion, bubbles, dynamic layout, ASCII art from Cheng Lou.
- Dragon Through Text — The viral dragon animation flowing through paragraphs.
- Pretext Breaker — Playable Breakout game in the browser.
- Pretext Lab — Interactive playground with drag-to-resize, masonry, chat bubbles, text flow around shapes.
High-star GitHub projects built with or extending Pretext. Star counts and activity badges are live via shields.io.
| Project | Stars | Last Commit | Description |
|---|---|---|---|
| pretext |  |
|
The library itself — DOM-free text measurement and layout |
| always-fit-resume |  |
 |
Resume builder that auto-scales to always fit one page |
| textura |  |
 |
Pretext x Yoga — DOM-free layout engine for the web |
| pinch-type |  |
 |
Pinch to zoom text, not the page |
| swift-pretextkit |  |
 |
Swift port of Pretext for Apple platforms |
| layout-sans |  |
 |
Pure TypeScript 2D layout engine — Flex, Grid, Magazine — zero DOM |
| pretext-video |  |
 |
Webcam into living typography via Pretext + MediaPipe |
| pretext-playground | |
 |
Interactive ASCII dragon playground with physics |
| pretext-demos | |
 |
Five polished layout engine demos |
| Project | Stars | Last Commit | Description |
|---|---|---|---|
| typexperiments | |
 |
Kinetic typography engine — per-character animations on Canvas |
| nim-pretext |  |
 |
Nim WASM port of Pretext — up to 9.5x faster than JS |
| pretext-php |  |
 |
PHP port with ICU segmentation and injectable font measurement |
| pretext_dart |  |
 |
Dart/Flutter port — pure-arithmetic multiline text layout |
- What is Pretext? — Introduction to the library and why it's 500x faster than DOM layout.
- How Pretext Works: prepare() and layout() Explained — Deep dive into the core API and internal architecture.
- Building Games with Pretext — From Tetris to Breakout at 60fps with ~0.09ms layout times.
- Pretext vs DOM Layout: Real-World Benchmarks — Comparative performance analysis with actual numbers.
- 17 Creative Ways Developers Are Using Pretext — Community showcase and inspiration.
- Official README — API docs and usage examples.
- RESEARCH.md — Research notes and design decisions behind Pretext.
- DEVELOPMENT.md — Contributing and development setup.
- thoughts.md — Cheng Lou's design thoughts and reflections.
- DeepWiki: chenglou/pretext — AI-generated wiki with architecture deep dives.
- Learn Pretext — 25+ interactive tutorials with live demos and annotated source code covering text measurement, layout, and advanced reflow techniques.
- How to Use Pretext.js: A Practical Guide — Hands-on guide covering installation, API basics, text reflow around obstacles, multi-slot layouts, and performance benchmarks.
- Pretext.js Tutorial — How to install and start measuring text layout in JS/TS. Published April 2, 2026.
- Knuth-Plass Justification with Pretext — Yining Karl Li implemented TeX-quality justified text on a blog using Pretext under the hood.
- Pretext + Three.js Guide — Combining Pretext for precision text layout with Three.js for spatial embodiment. By TachikomaRed.
No new courses found this cycle.
- You're Looking at the Wrong Pretext Demo — Den Odell argues the real innovation is predicting text height without DOM, not the flashy canvas demos.
- Cheng Lou's Pretext and the Case for Reactive Surface Layout as a New Graphics Primitive — Martin Erlic on Pretext as a new graphics primitive.
- Pretext Does What CSS Can't — HackerNoon deep dive into measuring text before the DOM exists.
- Pretext Complete Guide: 300x Faster Text Layout — Gardenee Blog comprehensive technical guide.
- Pretext: 15KB Library That Makes Text Layout 300x Faster — SVG Guide technical analysis.
- Pretext: DOM-Free Text Layout — Aihola analysis with critical perspective on AI UI claims.
- Pretext.js: The 15KB Library That Makes Text Layout 500x Faster — Apidog overview and API walkthrough.
- Fast DOM-Free Text Height Measurement — CSS Script practical overview.
- Simon Willison on Pretext — Simon Willison's take.
- Reid Burke on Pretext — Reid Burke's notes.
- The Story Behind the Fastest JavaScript Text Layout Engine — Deep dive into Cheng Lou's journey building Pretext.
- Accessible Pretext Demo — Building an accessible demo with Pretext on DEV.to.
- The future of text layout is not CSS (HN, 16 pts, 19 comments) — Cheng Lou's editorial engine demo that sparked discussion on userland layout.
- Pretext: TypeScript library for multiline text measurement (HN, 390 pts, 70 comments) — The main launch thread on Hacker News.
Pretext is brand new (March 2026) — video content is still emerging. Contributions welcome!
- Hacker News Discussion — Community discussion with deep technical insights from the launch thread.
- Linus Ekenstam on Threads — "This changes the internet at its core" — commentary from a design perspective.
- Kirupa Podcast: Cheng Lou on Text Layout — Podcast interview where Cheng Lou discusses his passion for text layout and the thinking behind Pretext.
- TypeBeat — drum machine from text — Alexander Chen's demo with sound. Built with Pretext + Gemini.
Pretext is framework-agnostic — it works identically in any JavaScript environment.
| Framework | Pattern |
|---|---|
| React | Call prepare() in useMemo, call layout() on resize via useLayoutEffect |
| Vue | Use computed for prepare(), watch container width for layout() |
| Svelte | Reactive $: block for prepare(), bind container width for layout() |
| Angular | Service-cached prepare(), ResizeObserver triggers layout() |
| Vanilla JS | Direct usage with ResizeObserver or requestAnimationFrame |
| Node.js / SSR | Server-side text measurement with Canvas polyfill |
- textura — Pretext x Yoga integration for full DOM-free layout (Flex, Grid, etc.)
- swift-pretextkit — Swift port for Apple platforms (iOS, macOS)
- layout-sans — Pure TypeScript 2D layout engine built on Pretext
Pretext is still very new — starter templates are emerging. Contributions welcome!
- pretext-boilerplate — Minimal boilerplate to get started with Pretext.
- Official Demos Source — Clone the repo and use the demos as a starting point.
git clone https://github.com/chenglou/pretext.git
cd pretext
bun install
bun start
# Open /demos in your browserProduction applications and real-world use cases powered by Pretext.
- Midjourney — Pretext was born from production needs at Midjourney, where ~5 engineers serve millions of users. Streaming AI tokens triggered continuous text reflows — the bottleneck that motivated the library.
- always-fit-resume — Resume builder that auto-scales font size and line spacing to always fit one page.
- pinch-type — Pinch-to-zoom text experience.
- pretext-video — Webcam-to-typography in the browser via Pretext + MediaPipe.
- Virtualization — Pre-compute heights for thousands of variable-height items without DOM. Works with React Virtuoso, TanStack Virtual, etc.
- Streaming AI responses — Predict chat bubble heights before streaming tokens finish, eliminating layout shift.
- Text updates at scale — Size tooltips, cells, and cards without forced reflow. 60fps even with hundreds of simultaneous updates.
- Responsive design — Compute text heights at multiple breakpoints from a single
prepare()call.
| Browser | layout() |
DOM measurement | Speedup |
|---|---|---|---|
| Chrome | 0.09ms | 43.50ms | 483x |
| Safari | 0.12ms | 149.00ms | 1,242x |
prepare()is the expensive phase (~19ms for 500 text segments) — but only runs once per text+font combolayout()is pure arithmetic — safe forrequestAnimationFramehot paths- 7680/7680 character-level accuracy across Chrome, Safari, and Firefox
- DOM vs Pretext — Side-by-side performance comparison.
- Pretext vs DOM Layout: Real-World Benchmarks — Detailed benchmark analysis with methodology.
prepare()— Normalize whitespace, segment text viaIntl.Segmenterfor locale-aware word boundaries, handle bidi text, measure segments with off-screen Canvas, cache results.layout()— Pure calculation over cached widths. No DOM, no reflow, no paint. Just math.
March 27, 2026 — Cheng Lou released Pretext as an open-source MIT-licensed library. Within 48 hours: 14,000+ GitHub stars, 19 million views on X.
Key coverage:
- VentureBeat: Midjourney engineer debuts Pretext to revolutionize web design
- Dataconomy: New TypeScript Library Pretext Tackles Text Reflow Bottlenecks
- TechBriefly: Pretext signals a shift toward userland layout engines
- HackerNoon: Pretext Does What CSS Can't
- 36Kr: Popular New Project by Front-end Guru Cheng Lou
- 35,000+ stars on GitHub (as of April 2026)
- Built using AI-assisted development (Claude + Codex), trained for weeks on browser ground truth
- 18+ community demos from independent developers within days of launch
| Who | Role | Links |
|---|---|---|
| Cheng Lou | Creator of Pretext. Previously React core team, ReasonML/ReScript creator, react-motion author. Currently at Midjourney. | GitHub · Website |
| Linus Ekenstam | Designer who highlighted Pretext's impact on web design | Threads |
| Den Odell | Author of "You're Looking at the Wrong Pretext Demo" | DEV.to |
| Simon Willison | Covered Pretext on his blog | Blog |
- pretext.cool — Community gallery and guides
- Pretext Wiki — Community hub and documentation
- pretextjs.dev — Community resource site
- Hacker News Thread — Launch discussion
- Star History — Watch the growth
Libraries and tools in the same problem space as Pretext.
| Project | Description |
|---|---|
| Yoga | Cross-platform layout engine (Flexbox) by Meta. Textura combines it with Pretext. |
| opentype.js | JavaScript parser and writer for OpenType fonts — complementary for font-level work. |
| react-motion | Also by Cheng Lou — animation library for React that shares the "math over DOM" philosophy. |
Contributions are welcome! Feel free to open an issue or submit a pull request to add demos, projects, tips, tutorials, articles, or news.