Community & Frontier

The fifteen kilobytes that lit a fire. In three weeks the community has built games, editorial engines, kinetic typography, 3D-in-characters, and a handful of arguments about what the library is actually for. Everyone named below made this course possible — credit to them, all links below.

The author

The library and its original nine demos.

@chenglou/pretext

by Cheng Lou
library · 15KB · zero deps
The original. A TypeScript library for multiline text measurement and layout that sidesteps the DOM entirely. Canvas-based measurement + pure arithmetic layout. Shipped March 27, 2026.
source demos npm

chenglou.me/pretext — the original 9

by Cheng Lou
reference demos
Accordion · Bubbles · Dynamic Layout (obstacle-aware title routing) · Variable Typographic ASCII · Editorial Engine · Justification Comparison (CSS / greedy / Knuth-Plass) · Rich Text · Markdown Chat · Masonry.
live demos editorial engine

Interactive demos & games

Where the community took Pretext past typography into physics, games, and play.

Dragon that parts text like water

by Azamat Takmalayev
physics · shape reflow
An 80-segment dragon follows your cursor across a two-column magazine spread. Text reflows around its moving body line-by-line at 60fps. Click to breathe fire. Practically a thesis on shape-aware variable-width layout.
source

Anime walk

by Azamat Takmalayev
animated obstacle · magazine layout
A character walks a figure-8 path across an editorial spread. Text continuously wraps around her in both columns. Demonstrates rectangle-based obstacle handling and multi-column overflow.
source

typexperiments

by Pablo Stanley
kinetic typography engine
A reusable canvas-based kinetic typography engine built on Pretext. Six effects: morph, explode, pour, wave, typewriter, vortex. Per-character animations with adjustable duration, stagger, and easing.
source live

pretext-demo

by cppmeandee
community demo
A community demo repo showing patterns on top of the Pretext API. Worth a source read for implementation ideas.
source

Novel Pretext demos by Cheng Lou

Outside the basic nine — the more exotic official demos referenced across the community.

ASCII raycaster

by Cheng Lou
3D · ascii
DOOM-style first-person raycasting rendered entirely through Pretext glyph math. 3D in characters. Moves smoothly because Pretext's measurement is cheap enough for per-frame glyph positioning.
demos index

Editorial Engine

by Cheng Lou
editorial · multi-column
The most ambitious of Lou's showcases. Pull quotes, animated orbs that displace text, multi-column flow, live reflow — all with zero DOM measurements.
live

Justification comparison

by Cheng Lou
knuth-plass · rivers
Three paragraph-layout approaches side by side: CSS default, greedy with hyphenation, and Knuth-Plass. Rivers visible in the first two, gone in the third. A crash course in why justification is hard.
demos index

Ecosystem & frameworks

Libraries and tools built on top of Pretext.

Textura

by Charlie Greenman / Razroo
pretext × yoga · flexbox
DOM-free layout engine combining Pretext (text measurement) with Yoga (flexbox) to give exact pixel geometry for any flex tree. Ships with an MCP server so AI coding agents can "see" layouts without a browser.
source site

Essays & analysis

The conversation around what Pretext is actually for.

You're Looking at the Wrong Pretext Demo

by Den Odell
critique
The sharpest counter to the viral canvas demos. Argues Pretext's real breakthrough is DOM-preserving text measurement — accessibility, screen readers, Cmd+F — and that the pixel stunts obscure it. The argument our Lesson 30 is built on.
read

Pretext — a first look

by Simon Willison
summary
Willison's summary of the library's value — the prepare/layout two-phase split, the canvas-as-ground-truth approach, and notes on Cheng Lou's LLM-assisted development process. Widely-cited.
read

Pretext notes

by Reid Burke
summary
Short but pointed — frames Pretext as foundational UI engineering infrastructure, quoting Lou on why DOM measurement costs what it costs.
read

Accessible Pretext demo

by Micaela Avigliano
a11y · demo
A practical walkthrough of using Pretext measurement while keeping the DOM rendering path — selection, screen readers, keyboard nav. Pair with Odell's essay.
read

Alternatives & where this lands natively

Adjacent libraries and the standards the field is inching toward.

uWrap.js

by @leeoniya
ascii-only · lighter
A simpler, smaller text-wrapping library from before Pretext. ASCII-only, 27× faster than Pretext on plain text — but without emoji, RTL, CJK, or hyphenation support. Good choice when you know the input is ASCII.
source

FontMetrics API (draft)

by CSS Houdini WG
web standard · draft
A CSS-Houdini draft that would expose structured font metrics (cap height, x-height, ascent/descent, break opportunities) directly to scripts. What Pretext currently has to derive from canvas, the browser might eventually provide natively.
spec draft

Community hubs

Sites collecting Pretext work in one place.

pretextwall.xyz

by Yuusuf Khan (@yuusuf_khaan)
community wall
A fan-curated showcase wall: shrink-wrap bubbles, obstacle flow, line-by-line layout, reading-speed checkers, dragon reflow, typographic ASCII. Unaffiliated with the official project but the most sincere aggregator.
visit

Hacker News discussion

HN community
thread · 3k+ points
The definitive thread — simonw, leeoniya, and others weighing in. References several demos and alternatives (pretext.lol, kevinho's experiments, somnai-dreams). Good first-stop for people trying to situate Pretext in the landscape.
thread

Credits

Everyone above, one place, linked.

— Cheng Lou (@chenglou) · the library and its original demos

— Azamat Takmalayev (@qtakmalay) · Dragon, Anime Walk

— Pablo Stanley (@pablostanley) · typexperiments

— Charlie Greenman / Razroo (@razroo) · Textura (Pretext × Yoga)

— cppmeandee (@cppmeandee) · community demo

— Den Odell (denodell.com) · critique essay

— Simon Willison (simonwillison.net) · first-look summary

— Reid Burke (reidburke.com) · Pretext notes

— Micaela Avigliano (@micaavigliano) · accessible demo walkthrough

— @leeoniya (github.com/leeoniya) · uWrap.js (adjacent library)

— Yuusuf Khan (@yuusuf_khaan) · pretextwall.xyz

— CSS Houdini WG (drafts.css-houdini.org) · FontMetrics API draft

— Hacker News commenters · the conversation that gave the library its context

— and the many unnamed posters, demo-builders, and readers who moved this forward in the three weeks between Pretext's release and this page

If you're one of the people above and want a correction or a link change, open an issue at the easymaking-site repo. If you made something on Pretext that should be listed here, open a PR.

← back to lessons