---
title: "GraphCanvas — Framer component · Best of Framer"
description: "$16.00 · Framer component · by Tommaso Sala · Charts. GraphCanvas A self-contained interactive canvas for Framer."
canonical: "https://framer.elliotli.dev/component/graphcanvas"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/GraphCanvas

# GraphCanvas

Interactive GraphCanvas with auto layout

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

![GraphCanvas preview image 1](https://framer.elliotli.dev/og/component/graphcanvas/38ef1bdbed599ee2/1600x1200.jpg)

## Summary

GraphCanvas A self-contained interactive canvas for Framer.

## Description

## 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

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

-   All · #4504

## Details

- **Author**: Tommaso Sala
- **Price**: $16.00
- **Published**: 2026-06-03
- **Updated**: 2026-06-02
- **Added**: 2026-05-24
- **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