Advanced

Take your visualizations to the next level with animations and interactivity.

Animations

Animations now have their own dedicated guide:

• See: Animations

Interactivity

You can handle click events on nodes and edges.

Preview

Code

import { viz } from 'vizcraft';

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

builder
.node('btn')
.at(200, 100)
.rect(120, 50, 10)
.label('Click Me')
.class('interactive-node')
.onClick((id) => alert(`Clicked node ${id}`))
.done();

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

info

Interactive elements will automatically get `cursor: pointer` if an `onClick` handler is attached, but you can also enforce it via styles.