pretext

Measure and layout text without a DOM for canvas rendering.

Updated May 4, 2026
One-click install
npx skills add https://github.com/Plaidmustache/hermes-nulab --skill pretext-plaidmustache
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/Plaidmustache/hermes-nulab/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/Plaidmustache/hermes-nulab --skill pretext-plaidmustache

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext provides a DOM-free way to measure and layout text in the browser, enabling creative demos and generative typography without reflows or heavy DOM manipulation.

Core Features & Use Cases

  • DOM-free text measurement and layout for canvas-based demos
  • Flow text around obstacles, support text-as-geometry, and kinetic typography
  • Produce single-file HTML demos that render via canvas with accurate line breaks and per-glyph data

Quick Start

Import @chenglou/pretext and build a single-file HTML demo that measures text and lays it out around an obstacle.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure text for canvas rendering without relying on the DOM?▼

DOM-free text measurement is achieved by passing a font string and max width to layout APIs, which return per-line data, line widths, and total height directly for canvas rendering.

How do I flow text around obstacles in a canvas-based generative art demo?▼

To flow text around obstacles, the layout engine measures grapheme positions and line ranges, allowing a single-file HTML canvas demo to calculate spatial boundaries and wrap text accurately.

Can I use this for kinetic typography and text-as-geometry in a single-file HTML demo?▼

Yes, kinetic typography and text-as-geometry are supported by exposing per-glyph data and line ranges, enabling precise coordinate mapping within a self-contained HTML canvas demo.

What text layout data is available for custom line breaking and rendering?▼

Custom line breaking utilizes returned per-line data, line widths, grapheme positions, and total height, providing the exact metrics needed to render accurately across canvas implementations.

Does this text layout engine require any external dependencies?▼

No external dependencies are required. The engine operates entirely DOM-free, enabling lightweight, single-file HTML demos without heavy DOM manipulation or reflows.