API reference
TypeScript types ship with the package (types/).
pele-animate
| Export | Signature | Description |
|---|---|---|
watch |
watch(container: HTMLElement, source?: string, options?: { controls?: boolean }): void |
Marks the container as a scene (pa-scene), animates each SVG Pele renders into it and re-applies after Pele re-lays-out on resize. controls: false keeps click-to-replay instead of step mode. |
prepare |
prepare(source?: string): string |
Returns the Mermaid source with icon-node labels padded so Pele lays out a box at least as wide as the icon (h). Pass its result to mount() and the original source to watch(). Without it, a label shorter than the icon puts edge ends and arrowheads under the icon. |
animate |
animate(svg: SVGSVGElement, options?: { hover?: Element; source?: string }): void |
Animates one rendered svg. source is read for %% pa: pins. Sets svg.paSteps. |
replay |
replay(svg: SVGSVGElement | null | undefined): void |
Plays the intro again. |
parseOrder |
parseOrder(source?: string): Map<string, number> |
Parses the %% pa: comment: node id, or 'X>Y' for an edge, to a 0-based step. |
svg.paSteps (type PaStep[], where PaStep = Array<[element: Element, parts: Element[]]>) is set by animate(): one array per
step.
pele-animate/glyphs
| Export | Signature | Description |
|---|---|---|
icons |
icons(name: string): string |
Pele's icons resolver. Unknown names return a neutral rounded square. |
registerGlyphs |
registerGlyphs(pack: Record<string, string>, strokeWidth?: number): void |
Adds glyphs: { name: '<inner markup of a 24x24 svg>' }. Default stroke width 1.1. |
registerTabler |
registerTabler(pack: Record<string, string>, strokeWidth?: number): void |
Adds outline icons whose stroke width follows --pa-stroke (fallback strokeWidth, default 1.5). |
S, L, W |
string |
Theme color expressions for glyph markup: solid, light, white. |
pele-animate/tabler/<category>
Importing a module registers that category's icons. It also exports pack: Record<string, string> (name to inner markup).
Categories are listed in icons.
pele-animate/preset-doverunner
Importing it registers the 20 doverunner-* glyphs. No exports.
pele-animate/style.css
The scene frame, motion and step controls. Import it once.
Classes you may see
pa-scene (container), pa-ready (an animated svg), pa-in and pa-done (intro states), pa-stepping (step mode), pa-controls
(the button bar). These are internal and may change; prefer the CSS variables in theming over targeting them.