xyflow/README.md

Wire Your Ideas With React Flow!

A highly customizable React component for building interactive graphs and node-based editors.

Getting Started | Documentation | Examples | Discord

---

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:

• Moritz Klack • Twitter • Github
• Christopher Möller • Twitter • Github

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.