GraphCanvas

GraphCanvas A self-contained interactive canvas for Framer.

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

Interactive GraphCanvas with auto layout