---
title: "Graph Canvas — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nitin Sangwan · Charts. An interactive force-directed node graph"
canonical: "https://framer.elliotli.dev/component/graph-canvas"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Graph Canvas

# Graph Canvas

An interactive force-directed node graph

[View on Framer](https://framer.com/marketplace/components/graph-canvas/?via=elliot-li)

![Graph Canvas preview image 1](https://framer.elliotli.dev/og/component/graph-canvas/07717f99b1a6777b/1600x1200.jpg)

## Summary

An interactive force-directed node graph

## Description

**Details**

Create interactive, physics-based node layouts in Framer using your own layers as draggable nodes.This component automatically connects all nodes to a primary node, adds smooth spring motion, prevents chaotic overlap, and keeps the layout feeling alive and responsive.

It’s ideal for:

-   Relationship maps
    
-   Portfolio skill maps
    
-   Team / org visualizations
    
-   Site navigation experiments
    
-   Interactive storytelling
    
-   Product ecosystem diagrams
    

Unlike static graph layouts, this component feels **playful, tactile, and alive** — while still staying visually controlled.-----------------------------------------------

**How It Works**

-   The **first node** in your Nodes list becomes the **primary / central node**
    
-   Every other node connects to it automatically
    
-   Nodes can be **dragged freely**
    
-   When released, they settle naturally using **spring-based motion**
    
-   Nodes gently **avoid overlapping**
    
-   If dragged too far outside the frame, they **glide back in**
    
-   Hovering a node dims unrelated nodes and lines for better focus
    

\-----------------------------------------------

**How To Use**

### 1\. Add the component to your canvas

Drop the component into your Framer project and size the frame however you like.

### 2\. Add your node layers

Use the **Nodes** property to insert your own Framer layers/components.

Each item can be:

-   text cards
    
-   buttons
    
-   tags
    
-   icons
    
-   mini content blocks
    
-   custom UI cards
    

### 3\. Arrange node priority

The **first node** in the list is treated as the **main node**.All other nodes connect to it automatically.

### 4\. Publish / preview

The graph will automatically initialize, settle into place, and become interactive.

\-----------------------------------------------

**Included Interactions**

### Draggable Nodes

Users can click and drag any node freely.

### Physics-Based Motion

Nodes move with soft spring behavior for a natural, fluid feel.

### Smart Collision Spacing

Nodes resist getting too close and gently push apart.

### Hover Focus

Hovering over a node:

-   keeps the hovered node fully visible
    
-   keeps the primary node fully visible
    
-   keeps the connecting line visible
    
-   dims unrelated nodes and lines
    

### Soft Boundary Behavior

Nodes can visually move beyond the frame edge, but they are gently pulled back in instead of getting harshly clipped.

\-----------------------------------------------

**Customizable Properties**

### Nodes

Add and reorder your custom node layers.

### Background Color

Sets the background of the graph container.

### Line Color

Controls the connector line color.

### Line Opacity

Adjusts how visible the connector lines are.

### Line Width

Controls connector stroke thickness.

### Dim Opacity

Controls how faded non-hovered nodes/lines become on hover.

### Spring Length

Controls how far nodes tend to sit from the primary node.

### Spring Strength

Controls how tightly the graph holds together.

### Damping

Controls how quickly motion settles after movement.

\-----------------------------------------------

**Best Practices**

-   Use **consistent card sizes** for a cleaner visual rhythm
    
-   Keep the **primary node visually stronger** than the rest
    
-   Works best with **4–12 nodes**
    
-   Leave enough empty space around the graph for motion
    
-   Use hover dimming to create **guided exploration**
    

\-----------------------------------------------

**Good Use Cases**

This component works especially well for:

-   **About pages**
    
    -   skills, tools, strengths, roles
        
-   **Portfolio case studies**
    
    -   process maps, systems, frameworks
        
-   **Startup / product sites**
    
    -   ecosystem or feature relationships
        
-   **Interactive storytelling**
    
    -   concepts, themes, character maps
        
-   **Navigation experiments**
    
    -   playful sitemap-style interfaces
        

\-----------------------------------------------

**Notes**

-   This component is designed for **interaction-first layouts**, not strict data visualization
    
-   Node positions are **physics-driven**, so layouts will feel organic rather than rigid
    
-   Best used when you want a graph that feels **alive**, not mechanical
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3947

## Details

- **Author**: Nitin Sangwan
- **Price**: $9.00
- **Published**: 2026-04-08
- **Updated**: 2026-04-08
- **Added**: 2026-03-27
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric