This page is a hub for the Pretext live demos hosted on pretext.cool — 18 community-built, interactive examples of the Pretext text layout library running in your browser. If you've searched for "pretext demo" because you want to see what the library can actually do, this is the right page.
Demos are grouped by what they're showing off. Each one runs in a real browser (no video), each one has its source on GitHub, and each one was built either by the library's author or by the community to stress-test a specific Pretext capability.
Most text layout libraries ship a single "homepage demo" — a sentence that wraps when you drag a slider. That's not enough to convey what Pretext is for. The library's central claim is that you can do anything you'd ever want to do with text dimensions, in pure JavaScript, fast enough that it doesn't matter when you do it. That claim only makes sense once you've watched a sprite reflow text at 120fps, scrolled a chat with 50,000 variable-height messages without a single jank, and seen a magazine-style multi-column layout with image obstacles render in microseconds.
The 18 demos collectively answer the questions "is this real?", "is it fast?", "does it handle my edge case?", and "what would I build with it?" — questions that no amount of documentation can substitute for.
These are the demos that most clearly show what Pretext is and why it's interesting.
The interactive sandbox: paste any text, pick any font from a dropdown, drag a width slider, and watch prepare() and layout() run live with timing displayed in microseconds. There's a font-selector with the system fonts available in your browser, plus a few web fonts loaded via @font-face. The result panel shows total height, line count, and (if you toggle it on) the per-line geometry from layoutWithLines.
This is the demo to start with if you want to develop intuition for what prepare() is doing and why it's fast. Try a long paragraph; try Chinese; try emoji; try a script with right-to-left segments. The playground reveals the engine's segmentation decisions in real time.
Drag a colored circle around a paragraph of Lorem Ipsum and watch the text reflow around it at 60fps — every frame. The demo uses layoutNextLine per line, with the available width on each line computed based on whether the sprite intersects that horizontal slice.
The interesting part isn't that text can reflow around an obstacle — it's that it can reflow on every frame. CSS can't do this; the DOM can't do this fast enough. Pretext does it in microseconds because the heavy work happened in prepare(), which ran once.
Fifty thousand chat messages, each with variable text length and therefore variable rendered height, in a virtualized scroller. Scroll position stays stable as messages enter and exit the viewport. The scrollbar accurately represents the total height, computed by calling layout() once per message at mount time.
This is the canonical "real production application" demo. It's the use case Cheng Lou cites in interviews when explaining why he built Pretext: he wanted variable-height virtual scrolling without the measurement-correction passes that other libraries require.
A surprising amount of Pretext usage is in games. Game UI is text-heavy, frequently localized (so wrap behavior changes per language), and runs in a render loop that can't tolerate DOM measurement.
A word-stacking puzzle game. Words fall from the top of the screen and you place them into a column; the column's height grows accurately as words land, because every word's wrapped height is computed by Pretext at the moment it lands. Localized into English, Japanese, and Chinese — the same code, different break behavior per language.
A more polished version of the drag-sprite-reflow demo, repackaged as a tiny game. You're a robot trying to read a paragraph while obstacles (other robots) block the page. The text rewraps around them in real time. Pretext does the layout work; a 60-line render loop draws to canvas.
A tower-defense game where the towers are letters and the path is the wrapped text. Bigger fonts, narrower paths. The text-wrapping logic is a game mechanic, not a UI affordance.
Pretext's per-frame budget makes it usable for things people don't normally consider for "text layout."
Animated subtitles that fade in word by word, computed from a prepared script and a per-word timing array. The demo shows that you can compute per-word x/y positions in advance (since you have the segments), then animate each word independently.
Each character of a paragraph is rendered as a particle that flies in from off-screen. The destination position of each character is computed via Pretext's per-line and per-segment data. The result: text "assembles" itself, and the assembly is layout-correct rather than visually-approximate.
A scrolling marquee where the scroll speed depends on the rendered width of the current text segment. The demo computes the width via layoutWithLines, then uses it to compute a per-segment scroll speed that keeps the visual rate constant regardless of which language is currently scrolling.
The "this is how a real CMS would use Pretext" group.
A multi-column magazine page with a headline, deck, body text, drop cap, and image obstacles. The body text wraps around the images. The drop cap reserves space on the first three lines. The columns auto-balance — the engine adjusts the column boundary so the columns end at roughly the same vertical position.
This is the demo that convinces designers that Pretext can do the things they actually want.
A grid of product cards, each with a title, description, and "more" link. The description is auto-truncated to N lines based on the card's height. The truncation is precise to the character — no CSS line-clamp ellipsis hack — because Pretext computes the exact cutoff point.
A tool for marketing folks: paste an email subject line, see at how many widths it would wrap to two lines (and therefore look bad in different inbox previews). Uses layout() repeatedly across width values; each call is microseconds.
The "weird and beautiful" group — demos built for aesthetics or to push the engine.
Tap a letter on screen and the surrounding paragraph rearranges to highlight every occurrence of that letter, smoothly animating from the original layout to the highlighted layout. Each frame computes a new layout; the GPU does the rest.
Text that visually shimmers like light through water. Each character's position is jittered by a small amount per frame; the underlying layout is computed once with Pretext and the jitter is applied as a render-time transform.
A paragraph that folds and unfolds, page-flip style. The fold lines are positioned at the line breaks Pretext computed.
The demos that exist to be measured rather than enjoyed.
Side-by-side: same text, same width, measured by Pretext (in JS, no DOM) and by getBoundingClientRect() (DOM measurement). Times are displayed in microseconds. Pretext wins by 100–500x on every test, depending on text length and how many measurements are needed.
This is the demo to send to skeptical colleagues. The numbers speak for themselves.
A visualization of the internal cache state — how many fonts measured, how many tokens cached, how memory grows over time as you prepare more text. Useful for tuning a cache size if you're integrating Pretext into a memory-constrained app.
Runs walkLineRanges for 10,000 iterations and reports the allocation rate. The point: zero allocations per line. The graph stays flat.
Each demo card on the homepage links to two things: the live demo URL, and the source on GitHub. The demos are intentionally minimal — single HTML files where possible, small React components otherwise — so you can read them and understand them in 5–10 minutes.
If you want to fork a demo as a starting point for your own project, every demo is MIT-licensed and the source is in the pretext.cool repo. Clone it, modify it, ship it.
The deepest insight from compiling the demos page is that you can't really understand Pretext from prose. You can read the API reference, see the eight functions, look at their type signatures, and form a vague picture. But the picture stays vague until you watch text reflow under a dragging sprite at 120fps and realize that the work is being done in microseconds, every frame. At that point the library's design choices click into place and the API reference reads completely differently.
Spend 10 minutes with the demos. Read the source of the one that surprises you most. Then come back to the Pretext library overview — it'll read like a different document.
If you build something with Pretext that would make the demos page better, the bar is low: a single HTML file or a small React component, MIT-licensed, that runs in a modern browser and shows off something the existing demos don't. Open a PR against github.com/chenglou/pretext.cool with a short README and a screenshot.
The demos that get accepted tend to be the ones that show a use case (a real-world UI pattern) rather than a visual trick. We have plenty of visual tricks; what we need is more "this is what a chat app looks like with Pretext" and "this is what a magazine layout looks like with Pretext."
For the API behind the demos, see the Pretext API reference. For the architectural background — why the demos are fast — read How Pretext Works. For framework-specific integration, see the Pretext + React guide. For copy-pasteable code patterns from the demos, see the Pretext Examples page.
The library lives at github.com/chenglou/pretext and the package is at @chenglou/pretext on npm. The demos source lives at github.com/chenglou/pretext.cool.
pretext.cool is a community-maintained showcase, not affiliated with Cheng Lou or the official Pretext project.