GraphCanvas: Premium Interactions Component by Tommaso Sala

A fully interactive node graph canvas for Framer. Drop any component as a node, CMS cards, frames, anything. Connections draw automatically or manually, with smooth pan, zoom, and physics-tuned layout. Built for portfolio storytelling, product maps, org chart

GraphCanvas

A self-contained interactive canvas for Framer. Drop any component into the Nodes slot, GraphCanvas handles layout, connections, pan, zoom, and drag automatically. No external dependencies.

Connections

Three modes to fit any workflow:

Manual _ define edges by node index with full per-edge color, style, and width control
Narrative _ auto-generates a trunk → branch → bridge graph, with sparse / balanced / dense density
Mixed _ both systems run together, deduplicated

Edges render as smooth cubic bezier curves and stay visible regardless of node position, connections work in both directions.

Layout Engine

Physics-inspired auto-layout with full control over every parameter:

Column count · Spacing & gutters · Stagger · Wave rhythm · Per-node jitter · Seed

Layouts can be exported as JSON and locked in, generate a layout you like, copy it, done.

Camera & Interaction

Pan with inertia, scroll-to-zoom anchored at cursor
Zoom range 0.22×–3× (configurable)
Auto-fit on mount
Snap to grid (optional)
Full prefers-reduced-motion support

Edit Mode

Enable Edit Mode to freely drag nodes. The built-in Layout Panel lets you re-roll layouts, revert to saved, and copy JSON, all without touching code.