{"data":{"slug":"xyflow-xyflow","name":"xyflow","tagline":"Powerful open source libraries for building node-based UIs with React and Svelte","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":38361,"forks":2530,"topics":["flowchart","graph","javascript","node-based-ui","react","react-flow","svelte","svelte-flow","typescript","typescript-library","workflow"],"archived":false,"github_pushed_at":"2026-09-10T15:18:27+00:00","maintenance_label":"Very active","stars_delta_30d":399,"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":142,"watchers":138,"ai_summary":"xyflow provides React Flow and Svelte Flow, which are libraries enabling developers to create customizable node-based user interfaces easily.","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-09-20T04:26:41.825642+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":"graph","name":"graph"},{"slug":"node-based-ui","name":"node-based-ui"},{"slug":"react-flow","name":"react-flow"},{"slug":"svelte-flow","name":"svelte-flow"},{"slug":"typescript-library","name":"typescript-library"},{"slug":"workflow","name":"workflow"}],"trust":{"provenance":{"is_fork":false,"github_id":197018189,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-09-14T06:00:22.686Z","maintenance":{"label":"Very active","score":96,"methodology":"github_public_v1","releases_90d":17,"days_since_push":3,"last_release_at":"2026-09-01T12:03:53Z","stars_delta_30d":399,"open_issues_delta_30d":1},"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-09-14T06:00:23.155Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-09-14T06:00:23.155Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-09-14T06:00:23.155Z"},"license_spdx":{"value":"MIT","source":"github.license","observed_at":"2026-09-14T06:00:23.155Z"}},"decision_facts":{"hosting":null,"pricing":{"model":"freemium","summary":"Free-to-use open-source version with no associated costs, but offers no enterprise support."},"requirements":{"notes":["Ensure your development environment supports React or Svelte as xyflow is specifically designed for these frameworks"],"min_ram_gb":null,"requires_docker":false},"constraints":{"min_ram_gb":null,"pricing_model":"freemium","requires_docker":false},"when_to_use":["Use xyflow when you want to build node-based UIs specifically tailored for React or Svelte projects","Consider xyflow if you need a library that supports easy customization of flowcharts and workflows directly within your frontend applications"],"when_not_to_use":["Avoid xyflow if you are working with frameworks other than React or Svelte, as these libraries are not compatible","Do not use xyflow for projects where minimal dependencies on external libraries are required, given that xyflow adds specific components and styles to your application"],"source":"enrich:decision_facts","observed_at":"2026-07-16T19:51:21.044Z"},"constraint_facets":{"min_ram_gb":null,"pricing_model":"freemium","requires_docker":false},"decision_summary":[{"label":"Pricing","value":"freemium - Free-to-use open-source version with no associated costs, but offers no enterprise support."},{"label":"Requirements","value":"Ensure your development environment supports React or Svelte as xyflow is specifically designed for these frameworks"},{"label":"Adopt for","value":"For developers looking to build node-based user interfaces with React and Svelte, xyflow provides powerful libraries for custom UI creation."},{"label":"License detail","value":"xyflow is available under the permissive MIT license."}]}}