reaflow

library5.4.1jsnpmunverified

Reaflow is a robust and modular diagram engine designed for building static or interactive node-based visualizations within React applications. Currently stable at version 5.4.1, the library maintains an active development pace with frequent updates. Its core strength lies in its ability to display complex visualizations with extensive customizability, differentiating it through features like automatic layout powered by ELKJS, precise control over node, edge, and port appearances, and interactive capabilities such as zooming, panning, drag-and-drop node manipulation, and undo/redo functionality. Reaflow provides a comprehensive toolkit for developers looking to integrate sophisticated diagramming capabilities, from simple flowcharts to intricate graph editors, leveraging the React ecosystem for component-based UI construction. It aims to offer a flexible and high-performance solution for rendering dynamic and data-driven diagrams.

web-framework

npm install reaflow

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REAFLOW

reaflow

web-frameworkjavascriptv5.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Canvas

✓ import { Canvas } from 'reaflow';

✗ const Canvas = require('reaflow').Canvas;

Reaflow is an ESM-first package since version 5, though it provides CJS exports for compatibility. ESM imports are recommended for modern React applications.

NodeData

✓ import { type NodeData } from 'reaflow';

Import types for enhanced TypeScript support, especially when defining custom node structures or using the library's data models.

EdgeData

✓ import { type EdgeData } from 'reaflow';

Import types for enhanced TypeScript support, especially when defining custom edge structures or using the library's data models.

Demonstrates how to render a basic flow diagram using the `Canvas` component with predefined nodes and edges, including simple interactivity.

import React from 'react'; import { Canvas } from 'reaflow'; const MyDiagram = () => ( <Canvas maxWidth={800} maxHeight={600} nodes={[ { id: '1', text: 'Start Node' }, { id: '2', text: 'Processing' }, { id: '3', text: 'End Node' } ]} edges={[ { id: '1-2', from: '1', to: '2', text: 'Flow A' }, { id: '2-3', from: '2', to: '3', text: 'Flow B' } ]} onNodeClick={(event, node) => console.log('Node clicked:', node.id)} onEdgeClick={(event, edge) => console.log('Edge clicked:', edge.id)} /> ); export default MyDiagram;

reaflow --version

Debug

Known issues

gotchaReaflow declares 'react' and 'react-dom' as peer dependencies. Ensure your project's React and ReactDOM versions meet the '>=16' requirement to avoid installation warnings or runtime issues.

fix

Check your project's `package.json` for React and ReactDOM versions. If they don't meet the `>=16` requirement, update them using `npm install react@^18 react-dom@^18` (or the desired compatible version).

affects: >=5.0.0

gotchaFor very large or complex graphs, the automatic layout calculation powered by ELKJS can be computationally intensive, potentially impacting rendering performance.

fix

Consider optimizing your data structure, implementing virtualization for large graphs, or exploring incremental layout updates. For static diagrams, pre-calculating layouts on the server-side can be an option.

affects: >=5.0.0

gotchaWhile Reaflow provides CJS exports, it is an ESM-first package. Mixing CommonJS `require()` with modern ESM `import` statements in a React project can lead to module resolution issues or unexpected behavior.

fix

Always use `import` statements for Reaflow components and utilities in modern React applications. Ensure your project's build configuration (e.g., Babel, Webpack, Vite) correctly handles ESM.

affects: >=5.0.0

Errors

Common errors & fixes

Error: Cannot find module 'reaflow' or its corresponding type declarations.

The 'reaflow' package is not installed or the import path is incorrect. This can also happen if TypeScript cannot find the type definitions.

fix

Ensure the package is installed: `npm install reaflow` or `yarn add reaflow`. Verify the import statement is `import { Canvas } from 'reaflow';`.

Warning: Failed prop type: The prop `nodes` is marked as required in `Canvas`, but its value is `undefined`.

The `nodes` or `edges` props (or other required props) are not being passed to the `Canvas` component, or they are `undefined`.

fix

Always provide the `nodes` and `edges` props as arrays (even empty ones) to the `Canvas` component. For example: `<Canvas nodes={[]} edges={[]} />`.

TypeError: Cannot read properties of undefined (reading 'x') during drag/drop or layout.

This often occurs when node or edge data objects are missing expected properties (like `id`, `x`, `y`, `from`, `to`) or are not in the format expected by the library.

fix

Review your `nodes` and `edges` data structures to ensure all required fields are present and correctly typed according to Reaflow's documentation (e.g., `NodeData`, `EdgeData`).

Upgrade

Version history

5.4.1latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React component functionality.

react-domrequiredRequired peer dependency for React DOM rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/reaviz/reaflow ↗

packagehttps://www.npmjs.com/package/reaflow ↗

homepagehttps://reaflow.dev ↗