canvaskitengine

This library is a browser vector engine rebuilt in TypeScript with CanvasKit as the rendering backend.

Install:

bun install
bun run build

That build emits both:

• dist/canvaskitengine.js
• dist/canvaskit.wasm

Import the wasm asset directly

If you want explicit control over the wasm URL, the package also exports it as a subpath:

import wasmUrl from "canvaskitengine/canvaskit.wasm";
import { CanvasEngineInit } from "canvaskitengine";

await CanvasEngineInit({
  wasmUrl,
});

Direct CanvasKit usage

If you want to see the backend explicitly, bootstrap CanvasKit yourself and hand the runtime to the engine:

import { CanvasEngineInit, createCanvasKitRuntime } from "canvaskitengine";

const runtime = await createCanvasKitRuntime();

await CanvasEngineInit({ runtime });

const engine = document.createElement("canvas-engine");
document.body.appendChild(engine);

If you prefer, you can also pass locateFile directly instead of importing the wasm subpath.

You can also provide a preloaded CanvasKit instance directly:

import CanvasKitInit from "canvaskit-wasm";
import { CanvasEngineInit, CanvasKitRuntime } from "canvaskitengine";

const canvasKit = await CanvasKitInit({
  locateFile: (file) => `/dist/${file}`,
});

await CanvasEngineInit({
  runtime: new CanvasKitRuntime(canvasKit),
});

Automatic CanvasKit loading

CanvasEngineInit() can also load CanvasKit with an explicit wasm path when needed:

import { CanvasEngineInit } from "canvaskitengine";

await CanvasEngineInit({
  locateFile: (file) => `/dist/${file}`,
});

Architecture note

CanvasKit is intentionally isolated behind the runtime layer:

• src/runtime/canvaskit.ts: official canvaskit-wasm bootstrap helpers
• src/runtime/index.ts: CanvasKit surface/paint/path/shader bridge, native font/typeface use, pattern shaders, fill rules, and native picture recording
• src/engine/index.ts: host component and engine bootstrapping

That keeps the document model and editing logic renderer-agnostic while still using CanvasKit for actual drawing.