Node-based Visualizations for React
REAFLOW is a modular diagram engine for build static or interactive editors. The library is feature rich and modular allowing for displaying complex visualizations with total customizability.
- Checkout the docs and demos
- Learn about updates from the Changelog
- Explore the library on Chroma
Install the package via NPM:
npm i reaflow --save
then add the component with some nodes and edges:
import React from 'react';
import { Canvas } from 'reaflow';
export default () => (
<Canvas
nodes={[
{
id: '1',
text: '1'
},
{
id: '2',
text: '2'
}
]}
edges={[
{
id: '1-2',
from: '1',
to: '2'
}
]}
/>
);
yarn install
yarn start
- Storybook Opens