Essentials

Learn the basics of creating scenes with VizCraft.

The Builder API

VizCraft uses a fluent builder pattern to construct your scene. The entry point is the `viz()` function.

import { viz } from 'vizcraft';

const builder = viz().view(800, 600); // Set viewBox
builder.node('a').at(100, 100).circle(24).done(); // Add a node
const scene = builder.build(); // Finalize scene

View & Grid

You can define the canvas size with `.view(w, h)` and optionally set up a grid for easy positioning.

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 300);

builder
.grid(5, 3, { x: 20, y: 20 }) // 5 cols, 3 rows, 20px padding
.node('n1').cell(0, 0).label('0,0').rect(60, 40)
.node('n2').cell(2, 1).label('2,1').circle(30)
.node('n3').cell(4, 2).label('4,2').diamond(60, 60).done();

const container = document.getElementById('viz-grid');
if (container) builder.mount(container);

Nodes

Nodes are the primary entities in your graph. You can create them with `.node(id)`.

Shapes

VizCraft supports three built-in shapes:

• `.circle(r)`
• `.rect(w, h, [rx])`
• `.diamond(w, h)`

Positioning

• `.at(x, y)`: Absolute positioning.
• `.cell(col, row, [align])` Grid-based positioning (requires `.grid()`).

Edges

Edges connect two nodes using `.edge(fromId, toId)`. By default, edges stop at the node boundary. Use `.connect('center')` to draw center-to-center.

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 200);

builder
.node('A')
.at(50, 100)
.circle(26)
.label('Start')
.node('B')
.at(450, 100)
.rect(80, 40)
.label('End')
.edge('A', 'B')
.arrow()
.label('Connects to')
.done();

const container = document.getElementById('viz-edges');
if (container) builder.mount(container);

Animations

For a full breakdown (registry/CSS animations, data-only timelines, playback controls, and live examples), see the dedicated guide:

• Animations