How-To Guides | VizCraft

📄️ Nodes & Shapes

Create and style nodes with 22 built-in shapes, drop shadows, sketch mode, embedded images, and icons.

Route edges, add markers and labels, use ports for precise anchoring, create self-loops and dangling edges.

Position nodes manually, use the grid system, or apply automatic layout algorithms.

Add motion to your visualizations with timeline-based animations, CSS animations, and playback controls.

Add annotation layers, signals, selection rectangles, and custom overlay kinds.

Handle click events, hit testing, port snapping, rubber-band selection, tooltips, and pan/zoom.

Containers, scene mutations, node resizing, z-ordering, plugins, serialization, SVG export, and perimeter anchors.

Use fromSpec to build VizCraft scenes from plain JSON objects — ideal for AI-generated content, serialized scenes, and data-driven visualization.

Drive interactive step-through explanations with createStepController — no Redux, no external animation loop.

Group nodes inside auto-sizing container frames, mark logical regions with zones, and collapse groups into summary nodes.

Stop hand-placing x/y — let deterministic layout engines (layered, grid, stack) position nodes and container children.

Attach edges to node sides or named ports, exit containers cleanly, route around obstacles, and separate parallel edges.

Type your edges and nodes semantically instead of hand-colouring them, auto-generate legends, add titles and sticky-note annotations.