# reactflow
> A highly customizable React library for building node-based editors and interactive flow charts
Latest version **11.11.4** (published 2024-06-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install reactflow
pnpm add reactflow
yarn add reactflow
bun add reactflow
```
## Health
**Score 45/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 11.11.4 |
| Published | 2024-06-20 |
| First published | 2014-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 179.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38442 |
| Maintainers | webk1d |
| Keywords | react, node-based UI, graph, diagram, workflow, react-flow |
## Links
- npm: https://www.npmjs.com/package/reactflow
- Repository: https://github.com/xyflow/xyflow
- Homepage: https://github.com/xyflow/xyflow#readme
- Issues: https://github.com/xyflow/xyflow/issues
- npm.io page: https://npm.io/package/reactflow
## Dependencies (6)
- [@reactflow/core](https://npm.io/package/@reactflow/core.md) 11.11.4
- [@reactflow/minimap](https://npm.io/package/@reactflow/minimap.md) 11.7.14
- [@reactflow/controls](https://npm.io/package/@reactflow/controls.md) 11.2.14
- [@reactflow/background](https://npm.io/package/@reactflow/background.md) 11.3.14
- [@reactflow/node-resizer](https://npm.io/package/@reactflow/node-resizer.md) 2.2.14
- [@reactflow/node-toolbar](https://npm.io/package/@reactflow/node-toolbar.md) 1.3.14
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 11.11.4 (latest) — 2024-06-20
- 11.4.0-next.1 (next) — 2022-12-15
- 11.11.3 — 2024-04-30
- 11.11.2 — 2024-04-22
- 11.11.1 — 2024-04-11
- 11.11.0 — 2024-04-04
- 11.10.4 — 2024-02-15
- 11.10.3 — 2024-01-25
- 11.10.2 — 2024-01-17
- 11.10.1 — 2023-11-10
- 11.10.0 — 2023-11-10
- 11.9.4 — 2023-10-16
- 11.9.3 — 2023-10-09
- 11.9.2 — 2023-09-26
- 11.9.1 — 2023-09-26
- … 47 more at https://npm.io/package/reactflow/versions
## README
A highly customizable React component for building interactive graphs and node-based editors.
[🚀 Getting Started](https://reactflow.dev/learn/getting-started/installation) | [📖 Documentation](https://reactflow.dev/learn/react-flow) | [📺 Examples](https://reactflow.dev/examples) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
---
## 🚨 Upcoming Changes
The main branch is the home of @xyflow/svelte and the upcoming @xyflow/react (React Flow v12). The current version is maintained and lives on the [v11 branch](https://github.com/xyflow/xyflow/tree/v11).
## Key Features
- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- **Customizable:** Different [node](https://reactflow.dev/examples) and [edge types](https://reactflow.dev/examples/edges/edge-types) and support for custom nodes with multiple handles and custom edges
- **Fast rendering:** Only nodes that have changed are re-rendered
- **Hooks and Utils:** [Hooks](https://reactflow.dev/api-reference/hooks) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/api-reference/utils)
- **Plugin Components:** [Background](https://reactflow.dev/api-reference/components/background), [MiniMap](https://reactflow.dev/api-reference/components/minimap) and [Controls](https://reactflow.dev/api-reference/components/controls)
- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
## Commercial Usage
**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟
**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://reactflow.dev/pro) or through [Github Sponsors](https://github.com/sponsors/xyflow).
You can find more information in our [React Flow Pro FAQs](https://reactflow.dev/pro).
## Installation
The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm:
```bash
npm install reactflow
```
## Quick Start
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/learn/customization/custom-nodes), [examples](https://reactflow.dev/examples) and the full [API reference](https://reactflow.dev/api-reference/react-flow).
```jsx
import { useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
);
}
```
## Development
Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
For local development, you can use `pnpm dev`.
## Testing
Testing is done with cypress. You can find the tests in the [`examples/cypress`](/examples/cypress/) folder. In order to run the tests do:
```sh
pnpm test
```
## Maintainers
React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs).
## Community Packages
- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
## Credits
React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in the browser. Under the hood, React Flow depends on these great libraries:
- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
- [zustand](https://github.com/pmndrs/zustand) - internal state management
## License
React Flow is [MIT licensed](https://github.com/xyflow/xyflow/blob/main/LICENSE).
---
_Source: https://npm.io/package/reactflow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._