skills.rest
kevinnft
kevinnftCOMMUNITY
Explore all skills by this author →
𝕏@nossxbtGitHub

pretext

Measure multiline text without DOM using Pretext layout APIs.

13|3|Updated May 12, 2026
Search Tags:#typography#canvas#generative-art#ascii-art#kinetic-typography#text-layout#pretext
One-click install
npx skills add https://github.com/kevinnft/ai-agent-skills --skill pretext-kevinnft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/kevinnft/ai-agent-skills/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/kevinnft/ai-agent-skills --skill pretext-kevinnft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pretext provides a DOM-free measurement and layout system for multiline text, returning exact line breaks, per-line widths, and per-glyph positions so you can render text as geometry or flow around obstacles without DOM reflow.

Core Features & Use Cases

  • Deterministic text measurement and layout using prepareWithSegments, layoutNextLineRange, and materializeLineRange for rendering in canvas or custom renderers.
  • Text-around-objects and kinetic typography demos: build editorial layouts, games, and generative art with text behaving like geometry.
  • Single-file demo friendly: produce self-contained HTML demos without a build step.

Quick Start

Prepare text with a chosen font and render lines on a canvas using layoutNextLineRange and materializeLineRange.

Frequently Asked Questions about pretext

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

FAQPage Schema
What is DOM-free text layout and how does it work for canvas rendering?▼

You can build kinetic typography demos and editorial layouts by using prepareWithSegments to initiate text measurement and layoutNextLineRange to calculate line breaks around shapes for canvas rendering.

How do I measure multiline text for custom canvas rendering?▼

You can build kinetic typography demos and editorial layouts by using prepareWithSegments to initiate text measurement and layoutNextLineRange to calculate line breaks around shapes for canvas rendering.

Can I flow text around objects in generative art without relying on DOM elements?▼

Pretext is suitable for single-file HTML demos because it enables self-contained creative demos without a build step, allowing direct text measurement and canvas rendering in the browser.

Do I need a build step to use this text layout tool for creative demos?▼

Pretext is suitable for single-file HTML demos because it enables self-contained creative demos without a build step, allowing direct text measurement and canvas rendering in the browser.

What are the limitations of DOM-free text measurement for kinetic typography?▼

DOM-free text measurement is limited to deterministic layout calculations like walkLineRanges and measureLineStats, meaning it does not handle native browser text reflow or accessibility features out of the box.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

pretext

Measure and lay out text with canvas rendering for creative applications.

Official
Advanced
tomada1114tomada1114
4

fixing-srt-subtitles

Correct transcription errors and optimize line breaks in SRT subtitle files.

Community
Basic
InverterNetworkInverterNetwork

pretext

Measure and lay out multiline text on HTML5 Canvas without DOM reflow.

Official
Advanced
icyzhicyzh
1

pretext

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

Community
Intermediate