{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install reaflow"],"cli":{"name":"reaflow","version":null}},"imports":["import { Canvas } from 'reaflow';","import { type NodeData } from 'reaflow';","import { type EdgeData } from 'reaflow';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}