pretext

Name: pretext
Availability: InStock
Author: Nadicode

Measure and lay out text without the DOM using the @chenglou/pretext API.

Updated Apr 9, 2026

Search Tags:#typography #canvas #creative-coding #ascii-art #demonstrations #text-layout #pretext

Ready to run

npx skills add https://github.com/nadicodeai/argo-agent --skill pretext-nadicodeai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/nadicodeai/argo-agent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/nadicodeai/argo-agent --skill pretext-nadicodeai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext provides a DOM-free text measurement and layout primitive that enables creative typography and generative art demos without relying on CSS reflow, allowing text to flow around shapes and be used as geometry.

Core Features & Use Cases

Self-contained demos: single-file HTML demos without a build step.
Text measurement and layout: compute line breaks, per-glyph positions, and total height using the @chenglou/pretext utility.
Creative primitives: flow text around obstacles, text-as-geometry games, ASCII art, kinetic typography, and generative demos.

Quick Start

Open the templates and render a single-file pretext HTML demo using real prose.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I measure text and compute line breaks in a browser canvas without using the DOM?▼

DOM-free text measurement computes line breaks, per-glyph positions, and total height using the @chenglou/pretext API. This allows text layout directly in interactive canvases without CSS reflow.

Can I flow text around obstacles and shapes in creative coding demos?▼

Yes, you can flow text around obstacles by treating text as geometry. The pretext utility provides creative primitives for text layout in interactive canvases without relying on DOM elements.

What is the best way to generate single-file HTML demos for kinetic typography and ASCII art?▼

The best way to build kinetic typography and ASCII art visuals is using pretext to render self-contained HTML demos. These single-file outputs require no build step and run directly in the browser.

Do I need a build step or external dependencies to create generative text layout demos?▼

No build step or external dependencies are required. Pretext enables self-contained, single-file HTML demos by relying on the @chenglou/pretext API and native browser rendering to produce generative text visuals.

Why does text flow break or misalign when building interactive canvas typography?▼

Text flow misaligns when relying on CSS reflow instead of DOM-free measurement. Pretext solves this by computing exact per-glyph positions and line breaks independently of the DOM layout engine.

Does pretext support text-as-geometry for interactive browser games?▼

Yes, pretext supports text-as-geometry games by computing per-glyph positions for typography. This enables developers to use rendered text as interactive geometric shapes within single-file HTML demos.