{"data":{"slug":"xyflow-xyflow","name":"xyflow","tagline":"React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customi","github_url":"https://github.com/xyflow/xyflow","owner":"xyflow","repo":"xyflow","owner_avatar_url":"https://avatars.githubusercontent.com/u/7106853?v=4","primary_language":"TypeScript","stars":37643,"forks":2468,"topics":["flowchart","graph","javascript","node-based-ui","react","react-flow","svelte","svelte-flow","typescript","typescript-library","workflow"],"archived":false,"github_pushed_at":"2026-07-14T14:43:48+00:00","maintenance_label":"Very active","url":"https://www.graphcanon.com/tools/xyflow-xyflow","markdown_url":"https://www.graphcanon.com/tools/xyflow-xyflow.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/xyflow-xyflow","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=xyflow-xyflow","description":"React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.","homepage_url":"https://xyflow.com","license":"MIT","open_issues":130,"watchers":130,"ai_summary":null,"readme_excerpt":"## Getting started\n\nThe best way to get started is to check out the [React Flow](https://reactflow.dev/learn) or [Svelte Flow](https://svelteflow.dev/learn) learn section. However if you want to get a sneak peek of how to install and use the libraries you can see it here: \n\n<details>\n  <summary><strong>React Flow</strong> basic usage</summary>\n\n  ### Installation\n  \n  ```sh\nnpm install @xyflow/react\n  ```\n\n  ### Basic usage\n  ```jsx\nimport { useCallback } from 'react';\nimport {\n  ReactFlow,\n  MiniMap,\n  Controls,\n  Background,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n} from '@xyflow/react';\n\nimport '@xyflow/react/dist/style.css';\n\nconst initialNodes = [\n  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },\n  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },\n];\n\nconst initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];\n\nfunction Flow() {\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n\n  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);\n\n  return (\n    <ReactFlow\n      nodes={nodes}\n      edges={edges}\n      onNodesChange={onNodesChange}\n      onEdgesChange={onEdgesChange}\n      onConnect={onConnect}\n    >\n      <MiniMap />\n      <Controls />\n      <Background />\n    </ReactFlow>\n  );\n}\n\nexport default Flow;\n```\n</details>\n\n<details>\n  <summary><strong>Svelte Flow</strong> basic usage</summary>\n\n  ### Installation\n  \n  ```sh\nnpm install @xyflow/svelte\n  ```\n\n  ### Basic usage\n  ```svelte\n<script lang=\"ts\">\n  import { writable } from 'svelte/store';\n  import {\n    SvelteFlow,\n    Controls,\n    Background,\n    BackgroundVariant,\n    MiniMap,\n  } from '@xyflow/svelte';\n\n  import '@xyflow/svelte/dist/style.css'\n  \n  const nodes = writable([\n    {\n      id: '1',\n      type: 'input',\n      data: { label: 'Input Node' },\n      position: { x: 0, y: 0 }\n    },\n    {\n      id: '2',\n      type: 'custom',\n      data: { label: 'Node' },\n      position: { x: 0, y: 150 }\n    }\n  ]);\n\n  const edges = writable([\n    {\n      id: '1-2',\n      type: 'default',\n      source: '1',\n      target: '2',\n      label: 'Edge Text'\n    }\n  ]);\n</script>\n\n<SvelteFlow\n  {nodes}\n  {edges}\n  fitView\n  on:nodeclick={(event) => console.log('on node click', event)}\n>\n  <Controls />\n  <Background variant={BackgroundVariant.Dots} />\n  <MiniMap />\n</SvelteFlow>\n```\n</details>\n\n---\n\n## License\n\nReact Flow and Svelte Flow are [MIT licensed](./LICENSE).","github_created_at":"2019-07-15T14:47:30+00:00","created_at":"2026-07-15T10:45:35.469348+00:00","updated_at":"2026-07-15T10:45:38.450433+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":"flowchart","name":"flowchart"},{"slug":"graph","name":"graph"},{"slug":"javascript","name":"javascript"},{"slug":"node-based-ui","name":"node-based-ui"},{"slug":"react","name":"react"},{"slug":"react-flow","name":"react-flow"},{"slug":"svelte","name":"svelte"},{"slug":"svelte-flow","name":"svelte-flow"}],"trust":{"provenance":{"is_fork":false,"github_id":197018189,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-07-15T10:45:36.455Z","maintenance":{"label":"Very active","score":96,"methodology":"github_public_v1","releases_90d":9,"days_since_push":0,"last_release_at":"2026-07-06T12:43:03Z"},"security_summary":{"status":"no_lockfile","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-15T10:45:36.906Z","medium_count":0,"scan_profile":"none","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-07-15T10:45:36.215Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-07-15T10:45:36.215Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-07-15T10:45:36.215Z"},"license_spdx":{"value":"MIT","source":"github.license","observed_at":"2026-07-15T10:45:36.215Z"}}}}