Wire Your Ideas With React Flow!
A highly customizable React component for building interactive graphs and node-based editors.
Installation
The easiest way to install the latest version of React Flow is to install it via npm:
npm install react-flow-renderer
Usage Example
// @todo
Maintainers
React Flow is developed and maintained by webkid, a data visualization studio from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
You can also use our contact form or join the React Flow Discord Server.
Community Packages
- useUndoable - Hook for undo/redo functionality with an explicit React Flow example
- react-flow-smart-edge - Custom edge that doesn't intersect with nodes
- Feliz.ReactFlow - Feliz React Bindings for React Flow
Credits
React Flow was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
- d3-zoom - used for zoom, pan and drag interactions with the graph canvas
- react-draggable - used for making the nodes draggable
- zustand - internal state management
License
React Flow is MIT licensed.