Hey Product Hunt 👋 I built GraphCanvas because Framer is genuinely excellent at pages — but it has no native way to show relationships. How projects connect. How a product ecosystem is structured. How a team maps spatially. Until now, you either hardcode a static graphic or reach for D3.js / React Flow, which pulls you out of the visual builder and into a full custom build. That’s overkill for most portfolios, SaaS sites, and org charts. GraphCanvas is a self-contained interactive canvas inside Framer. You drop any component as a node, CMS cards, frames, anything, and it handles auto-layout, connections, pan, zoom, and drag automatically. What makes it different: - Three edge modes: Manual: define connections by node index with full per-edge control Narrative: auto-generates trunk → branch → bridge topology Mixed: both systems together, deduplicated - Physics-inspired layout with full control over column count, spacing, stagger, wave rhythm, per-node jitter, and seed - Edit Mode with a built-in layout panel so you can drag nodes live, re-roll layouts, revert to saved, and export JSON — no code It’s built for portfolio maps, product diagrams, org charts, and CMS narrative flows — but I’m sure there are use cases I haven’t thought of yet. I’d love to hear what you’d build with this, or what’s missing for your use case. GraphCanvas is live on the Framer Marketplace at $16: https://www.framer.com/marketpla...

GraphCanvas for Framer

Interactive node graph canvas for Framer

Interactive node graph canvas for Framer