Community demo hub · v2 · 20 live demos

Pretext, played.
DOM-free text
at 500× speed.

20 interactive demos built on @chenglou/pretext — the 15KB zero-dependency TypeScript library by Cheng Lou (React core, ReasonML, Midjourney). Reflows, games, ASCII art, multi-script editorial layouts. Drag the panel on the right to see it work in real time.

Community-maintained, not an official site. The library lives at github.com/chenglou/pretext · official demos at chenglou.me/pretext.

Try 20 demos Read the API
★29.5k stars ⚡500× faster 📦15KB · 0 deps 🌏12+ writing systems
20live
Interactive demos
15KB
Bundle size, gzipped
0
Runtime dependencies
12+
Writing systems
500×
Faster than DOM measure
All demos

The full Pretext demo library

Every community-built demo, browseable by category. Filter instantly — URL updates so you can share a deep link to any view.

All demos are open-source · submit yours via GitHub Discussions ↗

Why Pretext

The DOM measurement bottleneck — and how Pretext sidesteps it

Every getBoundingClientRect(), every offsetHeight read inside a tight loop forces a synchronous browser reflow. In a virtual scroll, chat thread, or AI streaming UI, this is the silent killer of 60fps.

1 prepare()

Runs once per text + font pair. Pretext segments your string using Unicode rules (Intl.Segmenter) and measures each segment's glyph width via Canvas.measureText(). Result is cached for the lifetime of the page.

Cost: 0.1–1ms depending on text length. Pay once, reuse forever.

2 layout()

Pure arithmetic. Walks cached segment widths, tracks a running total, inserts line breaks where width is exceeded. No DOM. No reflow. Ever.

Cost: ~0.001ms per call. Fast enough to invoke thousands of times per frame — for virtual scrollers, chat UIs, animations, games.

Without Pretext (DOM)

  • Create hidden element, set text, append to DOM
  • Force synchronous reflow (style + layout)
  • Read offsetHeight back into JS
  • Repeat for every variable-height row
  • 0.5–2ms per measurement
→

With Pretext

  • Call prepare(text, font) once
  • Call layout(handle, width) per row
  • Pure JS arithmetic — zero DOM access
  • Cache survives resize, re-render, SSR
  • ~0.001ms per measurement
Quickstart

Three lines to your first Pretext layout

No build step required. Drop into any TypeScript or JavaScript project — works in Node, the browser, web workers, and inside React / Vue / Svelte / vanilla.

quickstart.ts 
// 1 · install — npm i @chenglou/pretext
import { prepare, layout } from '@chenglou/pretext'

// 2 · measure once per text + font (cached for the rest of the page)
const handle = prepare('Hello, Pretext. 你好，世界.', '16px Inter')

// 3 · lay it out at any width — pure arithmetic, ~0.001ms
const { height, lineCount, lines } = layout(handle, 400, 24)

// 4 · reuse the handle for any other width — instant
const narrow = layout(handle, 240, 24)  // → 0.001ms
const wide   = layout(handle, 800, 24)  // → 0.001ms
01 · INSTALL
npm i @chenglou/pretext

15KB gzipped · zero peer dependencies · TypeScript types included. ESM and CJS builds shipped side-by-side.

02 · PREPARE
Cache glyph widths once

Pass your text and font spec. Pretext segments with Intl.Segmenter and measures via Canvas. The returned handle is reused forever.

03 · LAYOUT
Reflow at any width, any time

Call layout(handle, width, lineHeight) as often as you want. Pure JS — safe inside requestAnimationFrame, web workers, or SSR.

Real production use

Built for the problems text layout actually creates

Pretext was extracted from production interfaces — chat, virtual scroll, editorial flows, real-time dashboards. The community demos above are the wild branches; below are the boring, valuable ones.

Virtual Scrolling

Pre-compute heights for 10,000+ variable-height items without creating a single DOM element. Pairs naturally with React Virtuoso, TanStack Virtual, or any virtualizer.

pretext react · virtual scroll

Chat & AI streams

Predict message bubble heights before the model finishes streaming. Tight-wrap to minimize whitespace. Eliminate the jumpy layout shift every AI chat suffers from.

pretext ai · chat layout

Multilingual Content

CJK, Arabic, Hebrew, Thai, Korean — Pretext measures every script with the same two-function API. Unicode segmentation and bidi handled automatically.

pretext i18n · CJK layout

Creative Typography

Text flowing around obstacles, magazine layouts, ASCII art with precise glyph measurements — the community demos above prove what becomes possible with per-line control.

pretext canvas · creative coding
Pretext vs DOM

Side-by-side: what each layer of the stack actually costs

Aspect DOM measurement Pretext
Speed per call 0.5 – 2 ms (forced reflow) ~0.001 ms (pure arithmetic)
DOM access Creates hidden elements Zero DOM reads / writes
Layout thrashing Triggers browser reflow Never — impossible by design
SSR / Web Workers No — requires a browser Yes — works in Node, workers, edge
Unicode & i18n Depends on browser version Intl.Segmenter — consistent everywhere
Bundle size Browser built-in ~15KB gzipped · 0 deps
Framework Coupled to DOM lifecycle Agnostic — React, Vue, Svelte, vanilla
chenglou / pretext live
View repo
—
Stars
—
Forks
—
Open issues
—
Last update

Data fetched live from the public GitHub API · falls back to a cached snapshot if rate-limited.

Guides & deep dives

Read about Pretext, then go build with it

All articles →
Getting started

What is Pretext, and why should React developers care?

A practical introduction — what problem Pretext solves, what the API looks like, and three production patterns where it saves frames.

10 min readMay 2026
Performance

Killing layout thrash in a virtualized chat thread

A teardown of a 40ms scroll jank bug we hunted down inside a Slack-style chat — replaced with Pretext in 30 lines of code.

14 min readApr 2026
Demos & creative

20 creative Pretext demos worth your weekend

A curated tour through the wildest community submissions — Bad Apple ASCII, dragon reflow, text physics, audio-driven typography.

8 min readApr 2026
React

Building a Pretext + React hook in 50 lines

A small, framework-friendly hook for measuring text without ever touching the DOM — pairs with Suspense and concurrent rendering.

12 min readMar 2026
中文

Pretext 入门：DOM-free 文字排版的中文实践

中文开发者视角下的 Pretext —— 为什么它对 CJK 排版友好，如何处理混排、垂直书写和复杂段落。

15 分钟阅读2026 年 4 月
Tutorial

From idea to demo: shipping your first Pretext experiment

An end-to-end walkthrough of building a community demo — scaffolding, layout, deploy, and submitting to pretext.cool.

20 min readMar 2026
Explore further

Reference pages for every Pretext keyword

Direct, hand-written reference content for the searches developers actually type. No filler, no thin pages.

Pretext Library/pretext-library Pretext API Reference/pretext-api Pretext Examples/pretext-examples Pretext + React/pretext-react Pretext + TypeScript/pretext-typescript Pretext on GitHub/pretext-github Pretext & CSS/pretext-css Pretext for AI UIs/pretext-ai Cheng Lou — about/chenglou-pretext npm install @chenglou/pretext/npm-pretext Awesome Pretext/awesome Pretext FAQ/faq