Canvas

Run the following command to install the `canvas` components:

Drag the background to pan, scroll to zoom around the cursor, or hold Space to pan from anywhere — including over a node. The middle mouse button pans too. x, y and zoom are all bindable if you want to drive or persist the view.

Zooming is exponential rather than linear, so a trackpad and a mouse wheel feel the same at every scale, and the point under the cursor stays under the cursor.

The grid is painted as a background gradient that pans and scales with the view, so an infinite field costs no DOM. Choose dots, lines or none. Set snap to round node positions to a step while dragging.

Connect two registered nodes with fromNode and toNode — the edge anchors to the right side of the source and the left side of the target, and follows them as they move. Pass explicit from/to points instead for free floating connectors. Three shapes are available: bezier, smoothstep and straight.

Every node registers its box with the canvas, which is what lets fitView() frame the whole graph and the minimap draw real geometry. The minimap always includes the current viewport in its bounds, so you never lose track of where you are — click it to jump.

Both are optional and can sit in any corner. The context is exported too, if you want to build your own.

Canvas.Node only handles position, dragging and selection — what goes inside is up to you. Here it is holding sticky notes.

Node positions live in canvas space, so screen deltas are divided by the zoom while dragging — a node stays under the cursor at any scale. Arrow keys nudge a focused node by the snap step, or 10 units with Shift. Set draggable={false} for fixed furniture, and selected is bindable.