{"id":13406424,"url":"https://github.com/xyflow/xyflow","last_synced_at":"2025-12-24T13:17:40.622Z","repository":{"id":37246611,"uuid":"197018189","full_name":"xyflow/xyflow","owner":"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.","archived":false,"fork":false,"pushed_at":"2025-04-30T19:13:49.000Z","size":38739,"stargazers_count":29272,"open_issues_count":101,"forks_count":1904,"subscribers_count":132,"default_branch":"main","last_synced_at":"2025-05-05T13:59:04.989Z","etag":null,"topics":["flowchart","graph","javascript","node-based-ui","react","react-flow","svelte","svelte-flow","typescript","typescript-library","workflow"],"latest_commit_sha":null,"homepage":"https://xyflow.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xyflow.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["xyflow"]}},"created_at":"2019-07-15T14:47:30.000Z","updated_at":"2025-05-05T13:52:39.000Z","dependencies_parsed_at":"2023-12-04T14:51:42.999Z","dependency_job_id":"89c9f9ce-5fc3-4d27-aea8-632cfc89efcd","html_url":"https://github.com/xyflow/xyflow","commit_stats":{"total_commits":3646,"total_committers":110,"mean_commits":33.14545454545455,"dds":"0.35929786066922653","last_synced_commit":"49e74dc88241c520f4744ba9ed34bb11dc31fc48"},"previous_names":["xyflow/react-flow","xyflow/xyflow","wbkd/react-flow"],"tags_count":627,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyflow%2Fxyflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyflow%2Fxyflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyflow%2Fxyflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyflow%2Fxyflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xyflow","download_url":"https://codeload.github.com/xyflow/xyflow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252512818,"owners_count":21760082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowchart","graph","javascript","node-based-ui","react","react-flow","svelte","svelte-flow","typescript","typescript-library","workflow"],"created_at":"2024-07-30T19:02:29.929Z","updated_at":"2025-12-24T13:17:40.603Z","avatar_url":"https://github.com/xyflow.png","language":"TypeScript","readme":"![xyflow-header](https://user-images.githubusercontent.com/2857535/279643999-ffda9f91-6b6d-447d-82be-fcbd6103edb6.svg#gh-light-mode-only)\n![xyflow-header-dark](https://user-images.githubusercontent.com/2857535/279644026-a01c231c-6c6e-4b41-96e0-a85c75c9acee.svg#gh-dark-mode-only)\n\n\u003cdiv align=\"center\"\u003e\n\n![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)\n![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072\u0026label=React%20Flow%20downloads)\n![npm downloads](https://img.shields.io/npm/dt/@xyflow/svelte?color=%23FF3E00\u0026label=Svelte%20Flow%20downloads)\n\nPowerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable.\n\n[React Flow](https://reactflow.dev/) · [Svelte Flow](https://svelteflow.dev/) · [React Flow Pro](https://reactflow.dev/pro) · [Discord](https://discord.gg/Bqt6xrs)\n\u003c/div\u003e\n\n---\n\n## The xyflow mono repo\n\nThe xyflow repository is the home of four packages:\n* React Flow 12 `@xyflow/react` [packages/react](./packages/react)\n* React Flow 11 `reactflow` [v11 branch](https://github.com/xyflow/xyflow/tree/v11)\n* Svelte Flow `@xyflow/svelte` [packages/svelte](./packages/svelte)\n* Shared helper library `@xyflow/system` [packages/system](./packages/system)\n\n## Commercial usage\n\n**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 🌟\n\n**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](https://reactflow.dev/pro) and for both of our libraries you can do it through [Github Sponsors](https://github.com/sponsors/xyflow).\n\n## 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\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eReact Flow\u003c/strong\u003e basic usage\u003c/summary\u003e\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) =\u003e setEdges((eds) =\u003e addEdge(params, eds)), [setEdges]);\n\n  return (\n    \u003cReactFlow\n      nodes={nodes}\n      edges={edges}\n      onNodesChange={onNodesChange}\n      onEdgesChange={onEdgesChange}\n      onConnect={onConnect}\n    \u003e\n      \u003cMiniMap /\u003e\n      \u003cControls /\u003e\n      \u003cBackground /\u003e\n    \u003c/ReactFlow\u003e\n  );\n}\n\nexport default Flow;\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eSvelte Flow\u003c/strong\u003e basic usage\u003c/summary\u003e\n\n  ### Installation\n  \n  ```sh\nnpm install @xyflow/svelte\n  ```\n\n  ### Basic usage\n  ```svelte\n\u003cscript lang=\"ts\"\u003e\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\u003c/script\u003e\n\n\u003cSvelteFlow\n  {nodes}\n  {edges}\n  fitView\n  on:nodeclick={(event) =\u003e console.log('on node click', event)}\n\u003e\n  \u003cControls /\u003e\n  \u003cBackground variant={BackgroundVariant.Dots} /\u003e\n  \u003cMiniMap /\u003e\n\u003c/SvelteFlow\u003e\n```\n\u003c/details\u003e\n\n## Releases \n\nFor releasing packages we are using [changesets](https://github.com/changesets/changesets) in combination with the [changeset Github action](https://github.com/changesets/action). The rough idea is:\n\n1. create PRs for new features, updates and fixes (with a changeset if relevant for changelog)\n2. merge into main \n3. changeset creates a PR that bumps all packages based on the changesets \n4. merge changeset PR if you want to release to Github and npm\n\n## Built by [xyflow](https://xyflow.com)\n\nReact Flow and Svelte Flow are maintained by the [xyflow team](https://xyflow.com/about). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).\n\n## License\n\nReact Flow and Svelte Flow are [MIT licensed](./LICENSE).\n","funding_links":["https://github.com/sponsors/xyflow"],"categories":["TypeScript","Uncategorized","Applications","前端开发框架及项目","javascript","[🪄 ui-front-end](https://github.com/stars/ketsapiwiq/lists/magic-wand-ui-front-end)","Other Components","workflow","Javascript Libraries","Repos","typescript","React Libraries","📖 Categories"],"sub_categories":["Uncategorized","Design Tool (e.g. Figma, Excalidraw)","其他_文本生成、文本对话","Renderers","React Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyflow%2Fxyflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxyflow%2Fxyflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyflow%2Fxyflow/lists"}