Pretext
Build creative browser demos with DOM-free text layout.
📖 Guide
Load with skill_view("pretext"). [`@chenglou/pretext`](https://github.com/chenglou/pretext) is a 15KB zero-dependency TypeScript library by Cheng Lou (React core, ReasonML, Midjourney) for **DOM-free multiline text measurement and layout**. It does one thing: given `(text, font, width)`, return the line breaks, per-line widths, per-grapheme positions, and total height — all via canvas measurement, no reflow.
🔧 How To
Skill sections: Pretext Creative Demos, When to Use, Creative Standard, Stack, The Two Use Cases, Use-case 1 — measure, then render with CSS/DOM.
⚠️ Pitfalls
1. **Drifting CSS/canvas font strings.** `ctx.font = "16px Inter"` measured, but CSS says `font-family: Inter, sans-serif; font-size: 16px`. Fine *if* Inter loads. If Inter 404s, CSS falls back to sans-serif and measurements drift by 5-20%. Always `preload` the font or use a web-safe family. 2. **Re-preparing inside the animation loop.** Only `layout*` is cheap. Re-calling `prepare` every frame wi
Related Skills
More skills in Creative