Skip to content
Blow

React Flow Examples

Blow ports of the official React Flow examples. Each card links to a self-contained page demonstrating one feature, with its source a click away. 83 examples in total.

Basics

Basic The minimal flow: a few nodes and edges with pan, zoom and selection.Empty An empty canvas you can build on by adding nodes at runtime.Default Nodes The built-in input, default and output node types.Overview A bigger graph showcasing node types, edge types and overlays together.Broken Nodes How the flow tolerates edges that reference missing nodes/handles.

Nodes

Custom Node A node rendered with a fully custom template and multiple handles.Default Node Overwrite Replace the built-in default node with your own renderer.Drag Handle Only a designated area of the node initiates dragging.Node Type Change Switch a node's type at runtime.Update Node Update a node's label, position and style imperatively.Stress Many nodes and edges with only-render-visible virtualization.Hidden Toggle visibility of nodes and edges.Subflow Nested nodes inside group containers (parent/child).Handle Positions Move the built-in node handles for top-down or left-right flows.Node Extents Constrain a node to a rectangle or its parent, or grow the parent to fit.Editable Node Text inputs inside a node, with Backspace left to the field.

Edges

Edges All built-in edge path types side by side.Edge Types Bezier, straight, step and smooth-step edges, animated and labelled.Custom Edges Custom edge templates built on BlowBaseEdge with interactive labels.Edge Renderer Custom edge with a button rendered on the edge label layer.Default Edge Overwrite Apply default options to every newly created edge.Floating Edges Edges that attach to the nearest point of each node.Reconnect Edge Drag an existing edge endpoint to a new handle.Edge Toolbar A toolbar that appears on the selected edge.Edge Path Options Tune curvature, corner radius, offset and bend position per edge.Edge Markers Per-edge arrowheads: open or closed, in any colour and size.Edge Label Styling Restyle, pad, round or remove the plate behind an edge label.Self-Connections Edges back to their own node loop clear of it instead of collapsing onto it.

Handles & Connections

Validation Validate connections while dragging and reject invalid ones.Custom Connection Line Customize the line drawn while creating a connection.Easy Connect Start a connection from anywhere on a node.Connection Mode Loose vs strict connection modes.Add Node on Edge Drop Drop a connection on the pane to spawn a connected node.Cancel Connection Press Escape to cancel an in-progress connection.Use Connection Observe the in-progress connection state live.Use Node Connections List the edges connected to a node.Moving Handles Add/move handles at runtime and refresh edge anchors.Connection Rules Duplicate, self and non-connectable rules applied while dragging.Handle Rules Validation and connect callbacks that live on the handle itself.

Interaction

Interaction Toggle draggable, selectable, zoom and pan options live.Drag and Drop Drag new nodes from a sidebar onto the canvas.Use Key Press React to keyboard shortcuts over the flow.Intersection Detect which nodes intersect a dragged node.Click Distance Distinguish a click from a drag using a distance threshold.Selection Change React to selection changes and show the selected ids.Delete Protection Deletable/Selectable flags, select-all and the delete veto.Auto Pan & Pinch Drag past the canvas edge to scroll; pinch with two fingers to zoom.Interaction Guards nodrag, nopan and nowheel: carve interactivity back out of the canvas.Key Bindings Choose which keys delete, zoom and multi-select.Alignment Guides Dragged nodes click into line with their neighbours.Selection Gestures Drag and right-click a whole selection; choose the selection and multi-select keys.

Viewport & Layout

Backgrounds Dots, lines and cross background patterns.Controlled Viewport Drive the viewport from your own state.Color Mode Light, dark and system color themes.Interactive MiniMap Pan and zoom the flow using the minimap.Custom MiniMap Node Render minimap nodes with custom colors/shapes.Layouting Layered, grid and circle auto-layouts from the built-in BlowLayout.Align & Distribute Line up and evenly space the selected nodes, the way a drawing tool does.Viewport Transitions Ease the viewport between two parts of a graph instead of cutting.Z-Index Mode Control stacking of nodes and edges.DevTools Inspect viewport, nodes and change events.Overlay Layout Anchor controls, minimap, panels and attribution; lock the canvas.Responsive Canvas Container and node resizes are tracked automatically; controlled viewport.

State & API

Use Flow API Call the imperative flow API (zoom, fit, add, delete).Provider Control a flow from outside via a captured reference.Save & Restore Persist and reload the flow from local storage.Controlled vs Uncontrolled Compare controlled and uncontrolled node state.Multi setNodes Multiple successive state updates in one tick.setNodes Batching Batch many node updates efficiently.Use Nodes Data Read and react to another node's data.Update Node Internals Re-measure a node after its handles change.Multi Flows Several independent flow instances on one page.External Store Drive a flow from a shared external store.Diagnostics OnError reports a malformed graph instead of throwing on it.Undo & Redo Snapshot-based history you drive from your own change events.Built-in Undo & Redo Let the canvas keep the undo stack and bind the shortcuts itself.Copy & Paste Copy, cut, paste and duplicate a selection, groups and all.

Add-ons

Node Resizer Resize nodes with the BlowNodeResizer control.Node Toolbar A toolbar anchored to the selected node.Touch Device Pointer-based interactions that work on touch.Accessibility Keyboard focus and arrow-key movement of nodes.Keyboard Accessibility Tab to nodes and edges, activate with Enter/Space, live announcements.Localization Translate every label and announcement the canvas makes.
Edit this page on GitHub
An unhandled error has occurred. Reload 🗙