React Flow, open source libraries for node-based UIs with React or Svelte

Summary

The xyflow mono repo The xyflow repository is the home of four packages: React Flow 12 @xyflow/react packages/react packages/react React Flow 11 reactflow v11 branch v11 branch Svelte Flow @xyflow/svelte packages/svelte packages/svelte Shared helper library @xyflow/system packages/system Commercial usage Are you using React Flow or Svelte Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 Are you using React Flow or Svelte Flow at your organization and making money from it? Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the React Flow Pro website and for both of our libraries you can do it through Github Sponsors. Getting started The best way to get started is to check out the React Flow or Svelte Flow learn section. However if you want to get a sneak peek of how to install and use the libraries you can see it here: React Flow basic usage Installation npm install @xyflow/react Basic usage import { useCallback } from 'react' ; import { ReactFlow , MiniMap , Controls , Background , useNodesState , useEdgesState , addEdge , } from '@xyflow/react' ; import '@xyflow/react/dist/style.css' ; const initialNodes = [ { id : '1' , position : { x : 0 , y : 0 } , data : { label : '1' } } , { id : '2' , position : { x : 0 , y : 100 } , data : { label : '2' } } , ] ; const initialEdges = [ { id : 'e1-2' , source : '1' , target : '2' } ] ; function Flow ( ) { const [ nodes , setNodes , onNodesChange ] = useNodesState ( initialNodes ) ; const [ edges , setEdges , onEdgesChange ] = useEdgesState ( initialEdges ) ; const onConnect = useCallback ( ( params ) => setEdges ( ( eds ) => addEdge ( params , eds ) ) , [ setEdges ] ) ; return ( < ReactFlow nodes = { nodes } edges = { edges } onNodesChange = { onNodesChange } onEdgesChange = { onEdgesChange } o...