GraphCanvas

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.

Property Controls

Every setting exposed in clean grouped objects directly in the Framer panel:

Layout · Camera · Interaction · Appearance · Edge Style · Grid · UI

Built For

Portfolio maps · Product diagrams · Org charts · CMS narrative flows · Architecture diagrams · Multi-part scroll experiences