{"id":13921,"library":"reaflow","title":"Reaflow: Node-based Visualizations for React","description":"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.","status":"active","version":"5.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/reaviz/reaflow","tags":["javascript","react","reactjs","workflow","node-editor","diagrams","elkjs","typescript"],"install":[{"cmd":"npm install reaflow","lang":"bash","label":"npm"},{"cmd":"yarn add reaflow","lang":"bash","label":"yarn"},{"cmd":"pnpm add reaflow","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Required peer dependency for React DOM rendering.","package":"react-dom","optional":false}],"imports":[{"note":"Reaflow is an ESM-first package since version 5, though it provides CJS exports for compatibility. ESM imports are recommended for modern React applications.","wrong":"const Canvas = require('reaflow').Canvas;","symbol":"Canvas","correct":"import { Canvas } from 'reaflow';"},{"note":"Import types for enhanced TypeScript support, especially when defining custom node structures or using the library's data models.","symbol":"NodeData","correct":"import { type NodeData } from 'reaflow';"},{"note":"Import types for enhanced TypeScript support, especially when defining custom edge structures or using the library's data models.","symbol":"EdgeData","correct":"import { type EdgeData } from 'reaflow';"}],"quickstart":{"code":"import React from 'react';\nimport { Canvas } from 'reaflow';\n\nconst MyDiagram = () => (\n  <Canvas\n    maxWidth={800}\n    maxHeight={600}\n    nodes={[\n      {\n        id: '1',\n        text: 'Start Node'\n      },\n      {\n        id: '2',\n        text: 'Processing'\n      },\n      {\n        id: '3',\n        text: 'End Node'\n      }\n    ]}\n    edges={[\n      {\n        id: '1-2',\n        from: '1',\n        to: '2',\n        text: 'Flow A'\n      },\n      {\n        id: '2-3',\n        from: '2',\n        to: '3',\n        text: 'Flow B'\n      }\n    ]}\n    onNodeClick={(event, node) => console.log('Node clicked:', node.id)}\n    onEdgeClick={(event, edge) => console.log('Edge clicked:', edge.id)}\n  />\n);\n\nexport default MyDiagram;","lang":"typescript","description":"Demonstrates how to render a basic flow diagram using the `Canvas` component with predefined nodes and edges, including simple interactivity."},"warnings":[{"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).","message":"Reaflow 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"For very large or complex graphs, the automatic layout calculation powered by ELKJS can be computationally intensive, potentially impacting rendering performance.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"While 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.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"search_vec":"'5.4.1':33 'abil':50 'activ':38 'aim':123 'appear':75 'applic':28 'automat':63 'base':4,24,119 'build':18 'capabl':78,104 'complex':53 'compon':118 'component-bas':117 'comprehens':95 'construct':121 'control':69 'core':45 'current':29 'customiz':57 'data':138 'data-driven':137 'design':16 'develop':39,98 'diagram':14,103,140,148 'differenti':58 'display':52 'drag':84 'drag-and-drop':83 'driven':139 'drop':86 'dynam':135 'ecosystem':115 'edg':72 'editor':111,147 'elkj':67,149 'engin':15 'extens':56 'featur':61 'flexibl':127 'flowchart':107 'frequent':42 'function':91 'graph':110 'high':130 'high-perform':129 'integr':101 'interact':21,77 'intric':109 'javascript':141 'layout':64 'leverag':112 'librari':35 'lie':47 'like':62 'look':99 'maintain':36 'manipul':88 'modular':13 'node':3,23,71,87,146 'node-bas':2,22 'node-editor':145 'offer':125 'pace':40 'pan':82 'perform':131 'port':74 'power':65 'precis':68 'provid':93 'react':7,27,114,142 'reactj':143 'reaflow':1,8,92 'render':134 'robust':11 'simpl':106 'solut':132 'sophist':102 'stabl':30 'static':19 'strength':46 'toolkit':96 'typescript':150 'ui':120 'undo/redo':90 'updat':43 'version':32 'visual':5,25,54 'within':26 'workflow':144 'zoom':81","created_at":"2026-04-20T01:57:00.895990+00:00","updated_at":"2026-04-20T01:57:00.895990+00:00","problems":[{"fix":"Ensure the package is installed: `npm install reaflow` or `yarn add reaflow`. Verify the import statement is `import { Canvas } from 'reaflow';`.","cause":"The 'reaflow' package is not installed or the import path is incorrect. This can also happen if TypeScript cannot find the type definitions.","error":"Error: Cannot find module 'reaflow' or its corresponding type declarations."},{"fix":"Always provide the `nodes` and `edges` props as arrays (even empty ones) to the `Canvas` component. For example: `<Canvas nodes={[]} edges={[]} />`.","cause":"The `nodes` or `edges` props (or other required props) are not being passed to the `Canvas` component, or they are `undefined`.","error":"Warning: Failed prop type: The prop `nodes` is marked as required in `Canvas`, but its value is `undefined`."},{"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`).","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'x') during drag/drop or layout."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"reaflow","cli_version":null,"type":"library","homepage":"https://reaflow.dev","github":"https://github.com/reaviz/reaflow","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/reaflow","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}