Canvas Text Layout (Pretext)
Chenglou's
@chenglou/pretexttext measurement engine removes DOM layout as the bottleneck for rich text UIs, enabling virtualization, responsive columns, and chat bubbles at ~500x faster measurement thangetBoundingClientRectinterleaving.
Announced in a 14-tweet thread (65,090 likes, 62,482 bookmarks — #2 in corpus by bookmarkCount): text layout was the last major blocker for flashier UIs in the AI era. Pretext is a few-kb library tuned against browser ground truth across languages (Korean mixed with RTL Arabic, platform emojis). Source: X/@_chenglou, 2026-03-28
The reviewed artifact shows the practical shape: a dark editorial page with a giant serif headline, draggable colored occlusion objects, responsive paragraph flow around the objects, and a "Zero DOM reads" claim. The point is broader than speed. Pretext turns text into compositional material that can be measured, animated, virtualized, and arranged without asking the browser layout engine for every answer. Source: local media artifact, 2026-06-30
What it unlocks
- Virtualization of hundreds of thousands of variable-height text boxes at 120fps without DOM measurement. Source: X/@_chenglou, 2026-03-28
- Shrink-wrapped chat bubbles and multi-column responsive magazine layouts. Source: X/@_chenglou, 2026-03-28
- Former CSS footnotes: auto-growing textareas, accordions, multiline centering, pure-canvas multiline text. Source: X/@_chenglou, 2026-03-28
Built with Claude Code and Codex iterating against per-width browser measurements over weeks. Source: X/@_chenglou, 2026-03-28
Install
npm install @chenglou/pretext (also bun). @chenglou/pretext@0.0.8 is the current npm release as of 2026-06-30; the GitHub repo has no tagged release, 48,860 stars, and main HEAD ac49b09b7d83ede19581fa94a8b892b07d309baf from 2026-06-23. Project and demo glossary linked from thread. Source: npm; GitHub chenglou/pretext, 2026-06-30
Relevance
Bridges GL-style landing pages and practical article layout without choosing one paradigm. See person page Cheng Lou (Chenglou) for author context.
Concept Position
| Field | Value |
|---|---|
| Concept family | Browser, computer use, and rendered verification |
| Concept owned | Chenglou's @chenglou/pretext text measurement engine removes DOM layout as the bottleneck for rich text UIs, enabling virtualization, res... |
| Category map | Concept System Map |
Timeline
- 2026-07-01 | Concepts category refresh added this page to the Browser, computer use, and rendered verification family, linked it to Concept System Map, and kept it standalone because it owns this reusable mental model: Chenglou's
@chenglou/pretexttext measurement engine removes DOM layout as the bottleneck for rich text UIs, enabling virtualization, res... Source: User request, 2026-07-01 - 2026-06-30 | Deep-reviewed the local image/video artifact and refreshed versioning:
@chenglou/pretext@0.0.8, repomainatac49b09b7d83ede19581fa94a8b892b07d309baf, no tagged release. Promoted the visual lesson that Pretext makes live text composition possible without DOM-read loops. Source: X/@_chenglou, 2026-03-28; npm; GitHub, 2026-06-30 - 2026-03-28 | Pretext thread published; massive engagement. Source: X/@_chenglou, 2026-03-28
- 2026-06-01 | Concept page compiled from enriched bookmark
2037713766205608234. Source: compiled from enrichment, 2026-06-01 - 2026-06-12 | Top-25 absorption (#2): refreshed engagement counts;
@chenglou/pretextinstall path confirmed in self-thread. Source: x-bookmark-absorb, 2026-06-12