Provides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.
npx skills add https://github.com/MCERQUA/jam-skills --skill pretext-mcerqua
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
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.
Install the pretext skill with pnpm and import the prepare and layout functions to measure text and lay out text blocks in your application.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
akillnessMeasure multiline text height and line layout without DOM reflow.
OpenCovenMeasure and lay out text without triggering DOM reflow.
PTKDrakeMeasure text and calculate layout without DOM reflow using canvas arithmetic.
cxnaiveMeasure and lay out multiline text on canvas without DOM reflows.
