skills.rest
nadicodeai
nadicodeaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pretext

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
One-click install
npx skills add https://github.com/nadicodeai/argo-agent --skill pretext-nadicodeai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
JuanMS20JuanMS20

pretext

Generate DOM-free text measurement and layout for browser demos.

Community
Advanced
Devsoul2026Devsoul2026
150

pretext

Measure and wrap multiline text without DOM reflows using @chenglou/pretext.

Community
Advanced
zaiyemeiyou404zaiyemeiyou404

pretext

Create text-based visual effects and interactive demos with the pretext library.

Community
Advanced
projectedanxprojectedanx
1

pretext

Measure text and calculate line breaks on canvas without DOM reflow.

Community
Advanced