NodeGraphPro — Interactive Node Diagrams for Framer

NodeGraphPro is a node-based canvas component built for Framer that allows users to connect and create nodes seamlessly. You can attach components, images, videos, and more to each node. The layout is fully configurable through an edit mode, making it a flexible tool for building interactive diagrams, flowcharts, and visual systems directly inside Framer.

Framer is powerful for building websites, but it doesn't natively support node-based canvas interactions (think Figma's connector lines, or a visual programming interface). The challenge was building a performant, interactive node system that works within Framer's component architecture and feels native to the platform.

Node Canvas Engine — A fully interactive canvas where users can create, position, and connect nodes with visual links. The canvas supports pan, zoom, and drag interactions.

Component Attachment — Each node can hold Framer components, images, videos, or custom content. This makes the system flexible enough for architecture diagrams, product flows, org charts, or creative mood boards.

Edit Mode — A toggle-able edit mode that lets users configure the layout, add/remove nodes, and adjust connections. When edit mode is off, the diagram becomes a clean, presentable visual.

Framer-Native — Built entirely within Framer's component system. Drop it into any Framer project, configure it through the properties panel, and it just works.

Available as a product on Contra ($30)

Fully interactive node-based canvas for Framer

Supports components, images, videos, and custom content per node

Edit mode for configuration, presentation mode for clean output

478 views on the community post