A SMALL PLAYGROUND FOR BIG IDEAS
Make the
connection.
An interactive field guide to Svelte Flow. Explore the building blocks, follow the edges, and make something of your own.
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Not an illustration. Try dragging a node.
Learn by moving thingsNothing hidden in the sourceA local assistant, not a black box
SIX WAYS INTO THE FLOW
A little curiosity goes a long way.
01
THE ESSENTIALS
Start with the basics
A few nodes. A couple of edges. A whole new way to think.
Explore demo
02
CUSTOM NODES
Give your ideas a shape
Custom nodes, useful details, and handles that make sense.
Explore demo
03
EXPRESSIVE EDGES
Read between the nodes
Curves, labels, and motion. Connections with a little character.
Explore demo
04
AUTO LAYOUT
Find a little structure
Turn a tangle of ideas into a clear, deterministic layout.
Explore demo
05
INTERACTION
Put it in your hands
Connect, select, and undo. Explore without the what-ifs.
Explore demo
06
PERFORMANCE
Think a thousand bigger
A thousand nodes. Real browser measurements. No guesswork.
Explore demo
LESS LOOKING. MORE MAKING.
Your next idea starts with a node.
Take the open canvas for a spin. Add a node, ask the local assistant for a hand, and share a link to what you make.