Terms and Definitions
React Flow is made up of three key components: nodes, edges and handles and a viewport. Let’s go through each of them in more detail.
Nodes
By default, a node looks like the example above. Each node has an x- and y-coordinate, which tells it where it is placed in the viewport. React Flow comes out of the box with a few default node types, but customization is where the magic of React Flow truly happens.
You can design your nodes to work exactly the way you need them to—whether that’s embedding interactive form elements, displaying dynamic data visualizations, or even incorporating multiple connection handles. React Flow lays the foundation, and your imagination does the rest.
We have a guide on creating your own Custom Nodes. You can find all the options for customizing your nodes in the Node Options documentation.
Handles
A handle (also known as a “port” in other libraries) is the attachment point where an edge connects to a node. By default, they appear as grey circles on the top, bottom, left, or right sides of a node. But, they are just div elements, and can be positioned and styled any way you’d like. When creating a custom node, you can include as many handles as needed. More information can be found in the Handle docs.
Edges
Edges connect nodes together. Every edge needs a target and a source node. React Flow comes with four built-in edges types: default (bezier), smoothstep, step and straight. An edge is SVG path that can be styled with CSS and is completely customizable. If you are using multiple handles, you can reference them individually to create multiple connections for a node.
Like custom nodes, you can also customize edges. Things that people do with custom edges are:
- Add a button to remove an edge
- Custom routing behavior
- Complex styling or interactions that cannot be solved with just one SVG path
You can find more information on the custom edges api site.
Viewport
All of React Flow exists inside of the viewport. The viewport has x, y and zoom values. When you drag the pane, you change the x and y coordinates and when you zoom in or out you alter the zoom level.