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 {
  Bezier,
  Polyline,
  FontParser,
  Sprites,
  CatmullRom,
  Delaunay,
  Projector,
} from '@shopify/klint/plugins';

Available Plugins

Plugin	Description	Docs
Bezier	Construct, analyze, offset, intersect, and render quadratic/cubic curves	Bezier
Polyline	Build, smooth, simplify, analyze, and render multi-segment paths	Polyline
FontParser	Load TTF, OTF, WOFF, and WOFF2 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, earcut polygon triangulation with holes, Voronoi	Delaunay
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 {
  BezierPoint,
  BBox,
  FontPathsResult,
  FontPointsResult,
  FontTextOptions,
  Triangle,
  SpriteConfig,
  Spritesheet,
  Point3D,
  ProjectedPoint,
  Transform3D,
} from '@shopify/klint/plugins';

Best Practices

• Load assets during initialization — fonts and sprites 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();
  };
}, []);