Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaviz/reaflow
🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://github.com/reaviz/reaflow
diagrams elkjs flowchart hacktoberfest node-editor react reactjs visualizations workflow
Last synced: 7 days ago
JSON representation
🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
- Host: GitHub
- URL: https://github.com/reaviz/reaflow
- Owner: reaviz
- License: apache-2.0
- Created: 2020-10-28T13:25:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-02T11:05:58.000Z (6 months ago)
- Last Synced: 2024-10-29T11:59:24.692Z (4 months ago)
- Topics: diagrams, elkjs, flowchart, hacktoberfest, node-editor, react, reactjs, visualizations, workflow
- Language: TypeScript
- Homepage: https://reaflow.dev
- Size: 9.84 MB
- Stars: 2,105
- Watchers: 18
- Forks: 122
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/Contributing.mdx
- Funding: .github/FUNDING.yml
- License: LICENSE
- Support: docs/Support.mdx
Awesome Lists containing this project
- my-awesome-list - reaflow
- awesome-node-based-uis - reaflow - React library for building workflow editors (Javascript Libraries / Renderers)
- awesome - reaflow - React library for building workflow editors, flow charts and diagrams (Uncategorized / Uncategorized)
- awesome-starred - reaviz/reaflow - 🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus. (reactjs)
- awesome_ai_agents - Reaflow - 🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus. (Building / Workflows)
- awesome_ai_agents - Reaflow - 🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus. (Building / Workflows)
README
Node-based Visualizations for React
---
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)
- Learn about updates from the [Changelog](CHANGELOG.md)
## 💎 Other Projects
- [Reagraph](https://reagraph.dev?utm=reaflow) - Open-source library for large webgl based network graphs.
- [Reablocks](https://reablocks.dev?utm=reaflow) - Open-source component library for React based on Tailwind.
- [Reaviz](https://reaviz.dev?utm=reaflow) - Open-source library for data visulizations for React.
- [Reachat](https://reachat.dev?utm=reaflow) - Open-source library for building LLM/Chat UIs for React.
-
## ✨ 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 () => (
);
```
## 🔭 Development
If you want to run reaflow locally, its super easy!
- Clone the repo
- `npm i`
- `npm start`
- Browser opens to Storybook page
## ❤️ Contributors
Thanks to all our contributors!
