🕸 reaflow


Node-based Visualizations for React

Open Collective backers and sponsors

--- REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability. ## 🚀 Quick Links - Checkout the [**docs and demos**](https://reaflow.dev) - Explore the library on [Chroma](https://www.chromatic.com/library?appId=5f99ba42fe88ac0022fd1147) - Learn about updates from the [Changelog](CHANGELOG.md) ## ✨ Features - Complex automatic layout leveraging ELKJS - Easy Node/Edge/Port customizations - Zooming / Panning / Centering controls - Drag and drop Node/Port connecting and rearranging - Nesting of Nodes/Edges - Proximity based Node linking helper - Node/Edge selection helper - Undo/Redo helper ## 📦 Usage Install the package via **NPM**: ``` npm i reaflow --save ``` Install the package via **Yarn**: ``` yarn add reaflow ``` Import the component into your app and add some nodes and edges: ```jsx import React from 'react'; import { Canvas } from 'reaflow'; export default () => ( ); ``` ## 🔭 Contributing See [Contributing](https://reaflow.dev/?path=/story/docs-contributing--page)