{"data":{"slug":"reaviz-reaflow","name":"reaflow","tagline":"React library for building workflow editors, flow charts and diagrams","github_url":"https://github.com/reaviz/reaflow","owner":"reaviz","repo":"reaflow","owner_avatar_url":"https://avatars.githubusercontent.com/u/63881140?v=4","primary_language":"TypeScript","stars":2490,"forks":160,"topics":["diagrams","elkjs","flowchart","hacktoberfest","node-editor","react","reactjs","visualizations","workflow"],"archived":false,"github_pushed_at":"2025-06-04T09:08:50+00:00","maintenance_label":"Dormant","stars_delta_30d":-3,"url":"https://www.graphcanon.com/tools/reaviz-reaflow","markdown_url":"https://www.graphcanon.com/tools/reaviz-reaflow.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/reaviz-reaflow","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=reaviz-reaflow","description":"🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.","homepage_url":"https://reaflow.dev","license":"Apache-2.0","open_issues":89,"watchers":17,"ai_summary":"REAFlow is a modular diagram engine for React to create static or interactive editors with complex visualizations and total customizability.","readme_excerpt":"
\n \n
\n Node-based Visualizations for React\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \"Open\n \n
\n\n---\n\nREAFLOW 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.\n\n## 🚀 Quick Links\n\n- Checkout the [**docs and demos**](https://reaflow.dev)\n- Learn about updates from the [Changelog](CHANGELOG.md)\n\n## 💎 Other Projects\n\n- [Reagraph](https://reagraph.dev?utm=reaflow) - Open-source library for large webgl based network graphs.\n- [Reablocks](https://reablocks.dev?utm=reaflow) - Open-source component library for React based on Tailwind.\n- [Reaviz](https://reaviz.dev?utm=reaflow) - Open-source library for data visulizations for React. \n- [Reachat](https://reachat.dev?utm=reaflow) - Open-source library for building LLM/Chat UIs for React.\n- \n## ✨ Features\n\n- Complex automatic layout leveraging ELKJS\n- Easy Node/Edge/Port customizations\n- Zooming / Panning / Centering controls\n- Drag and drop Node/Port connecting and rearranging\n- Nesting of Nodes/Edges\n- Proximity based Node linking helper\n- Node/Edge selection helper\n- Undo/Redo helper\n\n## 📦 Usage\n\nInstall the package via **NPM**:\n\n```\nnpm i reaflow --save\n```\n\nInstall the package via **Yarn**:\n\n```\nyarn add reaflow\n```\n\nImport the component into your app and add some nodes and edges:\n\n```jsx\nimport React from 'react';\nimport { Canvas } from 'reaflow';\n\nexport default () => (\n \n);\n```\n\n## 🔭 Development\n\nIf you want to run reaflow locally, its super easy!\n\n- Clone the repo\n- `npm i`\n- `npm start`\n- Browser opens to Storybook page\n\n## ❤️ Contributors\n\nThanks to all our contributors!\n\n","github_created_at":"2020-10-28T13:25:07+00:00","created_at":"2026-07-15T10:48:43.107099+00:00","updated_at":"2026-09-20T04:27:35.460999+00:00","categories":[{"slug":"developer-tools","name":"Developer Tools","url":"https://www.graphcanon.com/categories/developer-tools","markdown_url":"https://www.graphcanon.com/categories/developer-tools.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/developer-tools"}],"tags":[{"slug":"diagrams","name":"diagrams"},{"slug":"elkjs","name":"elkjs"},{"slug":"flowchart","name":"flowchart"},{"slug":"react","name":"react"}],"trust":{"provenance":{"is_fork":false,"github_id":308024078,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-09-16T06:00:52.635Z","maintenance":{"label":"Dormant","score":18,"methodology":"github_public_v1","releases_90d":0,"days_since_push":468,"last_release_at":null,"stars_delta_30d":-3,"open_issues_delta_30d":0},"security_summary":{"status":"no_lockfile","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-15T10:48:44.600Z","medium_count":0,"scan_profile":"none","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-09-16T06:00:53.100Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-09-16T06:00:53.100Z"},"has_cli":{"value":true,"source":"package.json:bin|scripts","observed_at":"2026-09-16T06:00:53.100Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-09-16T06:00:53.100Z"},"license_spdx":{"value":"Apache-2.0","source":"github.license","observed_at":"2026-09-16T06:00:53.100Z"}},"decision_facts":{"hosting":null,"pricing":null,"requirements":null,"constraints":null,"when_to_use":["When you need complex automatic layout capabilities powered by ELKJS for dynamic visualizations within React applications.","For projects requiring total customizability of nodes, edges, and ports that might involve unique customization needs not met elsewhere."],"when_not_to_use":["If your project does not require the use of TypeScript as REAFlow is built with it and may limit compatibility for users preferring other JavaScript dialects.","When an extensive library like REAFlow, which offers comprehensive features including undo/redo functionalities and a modular design, exceeds the project's technical complexity or requirement."],"source":"enrich:decision_facts","observed_at":"2026-07-17T08:20:24.798Z"},"constraint_facets":null,"decision_summary":[{"label":"Adopt for","value":"REAFlow is a React library specialized in creating and manipulating workflow editors, flow charts, and diagrams with TypeScript under the Apache-2.0 license."}]}}