Getting Started

Installation

npm install @vizzyjs/core @vizzyjs/renderer-canvas

pnpm / yarn

Works with any package manager: pnpm add, yarn add, etc.

Your First Scene

Vizzy renders to an HTML <canvas>. Use createScene() to set up the scene, then add() shapes:

import { circle, sky } from '@vizzyjs/core';
import { createScene } from '@vizzyjs/renderer-canvas';

const canvas = document.querySelector('canvas');
const { add } = createScene(canvas);

add(circle({ color: sky }));

createScene() returns an object you can destructure. The most common properties are:

Property	Purpose
add(shape)	Add a shape to the scene (auto-renders)
grid()	Add a coordinate grid
play(animation)	Run an animation (returns a Promise)
wait(seconds)	Pause between animations
controls	Create HTML controls (sliders, etc.)
interact	Add drag/hover/click to shapes

Shapes

Vizzy has 30+ shape factory functions. Every shape starts at the origin — use shift(x, y) to position it.

All shapes support a color shorthand for quick styling, or a style object for full control. See Shapes for the complete list.

Animations

Animations use async/await. Call play() to animate, and await the result. Pass multiple animations to play() to run them simultaneously.

See Animations for all animation types and options.

Coordinate System

Vizzy uses a 14x8 world-unit coordinate system with the origin at center and Y pointing up. You never deal with pixels — shapes are positioned in world units, and the renderer handles DPR scaling.

         (0, 4)
           │
(-7, 0) ───┼─── (7, 0)
           │
         (0, -4)

What's Next

• Shapes — All shape factories, positioning, colors, groups, and text
• Animations — The animation system in depth
• Interactivity — Controls and mouse interaction
• Examples — Gallery of interactive examples