CanvasKit by GeekyBones
CanvasKit is a modular, extensible canvas runtime built on PixiJS v8. Compose only the features you need — elements, history, camera, snap, serialization, and more — through a clean extension system.
| Feature | Description |
|---|---|
| Elements | Rectangle, Circle, Star, Line, Text (raster + vector mesh effects), Image, SVG |
| History | Configurable undo/redo with per-operation kind tracking |
| Interaction | Selection, multi-select, drag, resize, rotate, copy/paste, keyboard shortcuts, custom handles |
| Camera | Pan, zoom (wheel, pinch, keyboard), world↔screen coordinate mapping |
| Snap | Grid, object-center, edge, and guide snapping with visual indicator lines |
| Grid | Tiled background grid that tracks the camera |
| Alignment | 6-mode alignment for single or multi-element selections |
| Layering | Z-index management — bring to front/back, step forward/backward, batch reorder |
| Serialization | Serialize the full scene to plain JSON, restore it, register custom type adapters |
| Export | Render to PNG Blob or base64 data URL at standard / HD / ultra resolution |
| Fonts | Load custom web fonts via the FontFace API |
| Context menu | Built-in right-click menu with a full custom handler override |
| Performance | Asset cache reference counting (retain/release) |
npm install @geekybones/canvas-kit pixi.js
# or
pnpm add @geekybones/canvas-kit pixi.js
# or
yarn add @geekybones/canvas-kit pixi.jsimport { CanvasKit, Shape, Text } from '@geekybones/canvas-kit';
const canvas = new CanvasKit(document.getElementById('canvas-container')!, {
width: 1200,
height: 800,
backgroundColor: '#f4f5f7',
extensions: {
history: true,
interaction: true,
layering: true,
serialization: true,
export: true,
},
});
await canvas.ready;
await canvas.add(Text.create({
id: 'headline',
type: 'text',
text: 'Hello CanvasKit',
x: 160,
y: 120,
fontSize: 56,
fontWeight: '700',
fill: '#0f172a',
}));
await canvas.add(Shape.create(Shape.Rectangle, {
id: 'card',
x: 140,
y: 220,
width: 320,
height: 180,
fill: '#ffffff',
stroke: '#dbe4ff',
strokeWidth: 2,
borderRadius: 24,
}));
// Undo the last action
await canvas.history.undo();
// Serialize and restore
const scene = canvas.serializer.serialize();
await canvas.serializer.replace(scene);
// Export
const png = await canvas.export.render('png');The playground/ directory is a full React app demonstrating every feature.
cd playground
npm install
npm run devBuilt with the help of Claude Code.