@shotstack/shotstack-canvas

Text layout and animation engine using HarfBuzz WASM. Identical rendering on Node.js and Web.

Features

• HarfBuzz WASM text shaping with glyph outlines
• Cross-platform DrawOp abstraction (Canvas2D for web, @napi-rs/canvas for Node.js)
• Rich text with fonts, stroke, shadow, gradients, backgrounds, and borders
• SVG asset rendering (11 shape types + SVG markup import)
• Rich caption support with word-level timing and 8 animation styles
• Video generation (H.264 MP4 via FFmpeg on Node.js, WebCodecs in browser)
• RTL and bidirectional text support
• Custom font registration (file, URL, or ArrayBuffer)

Install

pnpm add @shotstack/shotstack-canvas

Quick Start

Node.js

import { createTextEngine } from "@shotstack/shotstack-canvas";

const engine = await createTextEngine({ width: 800, height: 400 });

const asset = engine.validate({
  type: "rich-text",
  text: "Hello World",
  font: { family: "Open Sans", size: 48, color: "#ffffff" },
});

const drawOps = await engine.renderFrame(asset.value, 0);
const renderer = await engine.createRenderer({ width: 800, height: 400 });
const buffer = renderer.paint(drawOps);

Web

import { createTextEngine } from "@shotstack/shotstack-canvas";

const engine = await createTextEngine({ width: 800, height: 400 });
const asset = engine.validate({ type: "rich-text", text: "Hello World" });
const drawOps = await engine.renderFrame(asset.value, 0);
const renderer = engine.createRenderer(canvas);
renderer.paint(drawOps);

Development

pnpm install
pnpm build
pnpm test

Release

Releases are automated via semantic-release. Pushing to main with Conventional Commit messages triggers a release:

• fix: ... — patch release (e.g., 2.0.15 → 2.0.16)
• feat: ... — minor release (e.g., 2.0.15 → 2.1.0)
• feat!: ... or BREAKING CHANGE: — major release (e.g., 2.0.15 → 3.0.0)

License

MIT