Plugins

Klint's plugin system extends the core library with specialized functionality for common creative coding tasks. Plugins are imported from @shopify/klint/plugins.

Installation

Plugins are included in the main Klint package:

npm install @shopify/klint

Import plugins as needed:

import { FontParser, Sprites, CatmullRom, Delaunay, MatterPhysics, Projector } from '@shopify/klint/plugins';

Available Plugins

Plugin	Description	Docs
FontParser	Load TTF fonts, convert text to vector paths or point arrays	FontParser
Sprites	Sprite sheet loading, frame drawing, and animation	Sprites
CatmullRom	Smooth curve interpolation through control points	CatmullRom
Delaunay	Delaunay triangulation for point sets	Delaunay
MatterPhysics	2D physics via Matter.js (bodies, constraints, collisions)	MatterPhysics
Projector	3D to 2D projection for pseudo-3D canvas drawing	Projector

Creating Your Own

Plugins are static utility classes that manage their own state and accept KlintContext only for drawing. See Creating Custom Plugins for the architecture guide and templates.

Type Imports

import type {
  FontPathsResult,
  FontPointsResult,
  FontTextOptions,
  Triangle,
  SpriteConfig,
  Spritesheet,
  Point3D,
  ProjectedPoint,
  Transform3D,
} from '@shopify/klint/plugins';

Best Practices

• Load assets during initialization — fonts, sprites, and physics setup belong in useEffect or preload, not in draw
• Cache results — pre-compute expensive operations outside the draw loop
• Clean up on unmount — call .clear() or .destroy() in your cleanup function

useEffect(() => {
  return () => {
    Sprites.clear();
    MatterPhysics.destroy();
  };
}, []);