VisualFlowCore Concepts
Nodes, edges, handles and the viewport — the four primitives behind every diagram.
Beginner · 8 min read · Updated Oct 31, 2026
The mental model
A flow is a graph: a list of nodes and a list of edges. React Flow renders that graph onto an infinite, transformable viewport. You own the data; the library owns the rendering and interaction.
The four primitives
Understanding these four ideas covers most of what you will ever do.
- Nodes — positioned elements that carry arbitrary data.
- Edges — connections between a source and target node.
- Handles — the connection points on a node where edges attach.
- Viewport — the pan and zoom transform applied to the whole canvas.
Controlled vs uncontrolled
Passing defaultNodes lets React Flow manage state internally, which is ideal for prototypes. Passing nodes with onNodesChange makes the flow controlled, which is what production apps want because state lives in your store.