5b:I[473921,["/creators-assets/_next/static/immutable/chunks/14a-lgu6jtel0.js","/creators-assets/_next/static/immutable/chunks/01di3z18mksiu.js","/creators-assets/_next/static/immutable/chunks/2hqzsr6h-gzc4.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/265hz54511_3p.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1hwybpfuim_yt.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2qzdaico5yl5u.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/3-8f4rybh7r0x.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/112wc2bw8_d64.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/1vjbtb1fgm36-.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0251o0a-m_n4-.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 5d:I[885856,["/creators-assets/_next/static/immutable/chunks/14a-lgu6jtel0.js","/creators-assets/_next/static/immutable/chunks/01di3z18mksiu.js","/creators-assets/_next/static/immutable/chunks/2hqzsr6h-gzc4.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/265hz54511_3p.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1hwybpfuim_yt.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2qzdaico5yl5u.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/3-8f4rybh7r0x.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/112wc2bw8_d64.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/1vjbtb1fgm36-.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0251o0a-m_n4-.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"CommentSection"] 5c:T7bd,

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

58:[["$","$L5b",null,{"post":{"id":"019e8c9e-fef1-705c-8721-d97c79261e78","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"deb5abe6-0725-403b-bbbd-15775e67c0f3","name":"Tommaso Sala","slug":"tommaso-sala","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"naymHoCuR1T5Bd72MCuH","resolved":true,"title":"GraphCanvas","body":"$5c","bodyJson":null,"introduction":"Interactive GraphCanvas with auto layout","slug":"graphcanvas","author":{"framerUserId":"deb5abe6-0725-403b-bbbd-15775e67c0f3","name":"Tommaso Sala","slug":"tommaso-sala","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/naymHoCuR1T5Bd72MCuH/graphcanvas-8f2tbVvQhw3ZhzhOPXondao0Aof6HW","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T17:48:48.502Z","updatedAt":"2026-06-02T12:06:31.093Z","publishedAt":"2026-06-03T08:34:50.737Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://passionate-choice-043094.framer.app/","price":"16","paymentUrl":"https://contra.com/payment-link/6RSt7TTk-node-graph","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"2nKgqvvNtstIKxdGDxfs","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-03T08:34:50.737Z","updatedAt":"2026-06-03T08:34:50.737Z","reported":false,"type":"post"}}],["$","$L5d",null,{"target":{"kind":"post","postId":"019e8c9e-fef1-705c-8721-d97c79261e78"},"postId":"019e8c9e-fef1-705c-8721-d97c79261e78","postAuthor":"$58:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you