pretext

Name: pretext
Availability: InStock
Author: MCerqua

Provides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.

1|Updated Mar 5, 2026

Search Tags:#performance optimization #text layout #text measurement #canvas rendering #virtualized lists

Ready to run

npx skills add https://github.com/MCERQUA/jam-skills --skill pretext-mcerqua

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/MCERQUA/jam-skills/tree/main/pretext
Command: npx skills add https://github.com/MCERQUA/jam-skills --skill pretext-mcerqua

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pretext solves the need for fast and efficient text measurement and layout in web applications, especially where performance is critical and DOM access should be minimized.

Core Features & Use Cases

Efficient Text Measurement: Achieves ~500x faster text measurement compared to traditional DOM methods.
Flexible Rendering: Supports text rendering in DOM, Canvas, and SVG, making it versatile for various UI components.
Use Case: Optimize performance in virtualized lists, masonry layouts, and auto-growing text areas without the overhead of traditional text measurement techniques.

Quick Start

Install the pretext skill with pnpm and import the prepare and layout functions to measure text and lay out text blocks in your application.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I measure text width without reading from the DOM?▼

Fast text measurement without DOM access is achieved by using canvas rendering. Pretext provides a JavaScript and TypeScript library that measures text dimensions directly, bypassing CSS reflow overhead to accelerate rendering in text-intensive UI components.

What is the best way to optimize text layout in virtualized lists?▼

The best way to optimize text layout in virtualized lists is to eliminate traditional DOM measurement overhead. Using a canvas-based text measurement library provides precise layout calculations without triggering expensive CSS reflows, drastically improving list scroll performance.

Why is text measurement slow in my responsive layouts and how can I speed it up?▼

Text measurement is slow in responsive layouts because traditional DOM methods trigger synchronous CSS reflows. You can speed it up by switching to canvas-based text measurement, which avoids DOM reads entirely and operates significantly faster for text-intensive UI components.

Can I render measured text across DOM, Canvas, and SVG formats?▼

Yes, you can render measured text across DOM, Canvas, and SVG formats. Once the text measurement and layout are calculated without DOM reads, the resulting dimensions can be applied to render text flexibly across these various UI component environments.

Do I need any external API keys to perform high-performance text layout?▼

No, you do not need any external API keys to perform high-performance text layout. Pretext relies entirely on local canvas rendering for text measurement, meaning no external dependencies or API configurations are required for the text layout process.

When should I avoid traditional DOM methods for text measurement?▼

You should avoid traditional DOM methods for text measurement in high-performance applications like virtualized lists or masonry layouts. If your UI is text-intensive and experiences scroll lag, DOM CSS reflow overhead is likely the bottleneck, making canvas-based measurement necessary.