Pretext — Build creative browser demos with DOM-free text layout
Pretext — Build creative browser demos with DOM-free text layout
Start with meaning, then move to detail.
This lesson explains Pretext — Build creative browser demos with DOM-free text layout as part of extending Hermes and connecting external tools. You will learn what it does, when it matters, and the smallest safe test that proves it works.
If you are new, do not memorize names. Focus on three questions: what problem does this solve, what access does it need, and how can you verify the result?
For practice, inspect the first example, identify its effects, run it on test data, and compare the result with the source claim.
For advanced readers, inspect Skill metadata, Reference: full SKILL.md, Overview, then verify failure modes and version compatibility.
Complete installation and one successful task before adding new capabilities.
A clear outcome before you read.
- Understand Pretext — Build creative browser demos with DOM-free text layout without assumed prior knowledge.
- Separate the source description from what still needs testing in your environment.
- Read the first command and identify its inputs and outputs before copying it.
Short definitions before the details.
- Skill
- An instruction bundle that teaches Hermes a repeatable workflow without necessarily adding an external service.
- Browser / CDP
- A layer for programmatic browser control and page or event inspection.
Build creative browser demos with DOM-free text layout
What does the source say, and in what order?
- 01Skill metadata
Start here to understand the core idea or structure.
- 02Reference: full SKILL.md
Read this after the foundation, then connect it to the previous step.
- 03Overview
Read this after the foundation, then connect it to the previous step.
- 04When to Use
Read this after the foundation, then connect it to the previous step.
- 05Creative Standard
Read this after the foundation, then connect it to the previous step.
- 06Stack
Read this after the foundation, then connect it to the previous step.
- 07The Two Use Cases
Read this after the foundation, then connect it to the previous step.
- 08Use-case 1 — measure, then render with CSS/DOM
Read this after the foundation, then connect it to the previous step.
- 09Use-case 2 — measure and render yourself
Read this after the foundation, then connect it to the previous step.
- 10Helpers worth knowing
Finish here to verify the result and special cases.
Copy only after you understand the effect.
Pin the version. `@0.0.6` at time of writing — check [npm](https://www.npmjs.com/package/@chenglou/pretext) for the latest if demo behavior is off.
## The Two Use Cases
Almost everything reduces to one of these two shapes. Learn both.
### Use-case 1 — measure, then render with CSS/DOMYou still let the browser draw the text. Pretext just tells you how tall the box will be at a given width, **without** a DOM read. Use for:
- Virtualized lists where rows contain wrapping text
- Masonry with precise card heights
- "Does this label fit?" dev-time checks
- Preventing layout shift when remote text loads
**Keep `font` and `letterSpacing` exactly in sync with your CSS.** The canvas `ctx.font` format (e.g. `"16px Inter"`, `"500 17px 'JetBrains Mono'"`) must match the rendered CSS, or measurements drift.
### Use-case 2 — measure *and* render yourselfThis is where the creative work lives. You own the drawing, so you can:
- Render to canvas, SVG, WebGL, or any coordinate system
- Substitute per-glyph transforms (rotation, jitter, scale, opacity)
- Use line metadata (width, grapheme positions) as geometry
For **variable-width-per-line** flow (text around a shape, text in a donut band, text in a non-rectangular column):Read the first command and identify its inputs and outputs before copying it.
Match every command to your installed Hermes version, review the files and accounts it can reach, and use non-sensitive data for the first test. If this explanation differs from the source, the official source wins.