[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1513":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":14,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":15,"starSnapshotCount":15,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},1513,"xyflow","xyflow\u002Fxyflow","React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https:\u002F\u002Freactflow.dev) or Svelte (https:\u002F\u002Fsvelteflow.dev). Ready out-of-the-box and infinitely customizable.","https:\u002F\u002Fxyflow.com",null,"TypeScript",37020,2433,132,90,0,10,472,64,120,"MIT License",false,"main",[24,25,26,27,28,29,30,31,32,33,34],"flowchart","graph","javascript","node-based-ui","react","react-flow","svelte","svelte-flow","typescript","typescript-library","workflow","2026-06-12 04:00:10","![xyflow-header](https:\u002F\u002Fuser-images.githubusercontent.com\u002F2857535\u002F279643999-ffda9f91-6b6d-447d-82be-fcbd6103edb6.svg#gh-light-mode-only)\n![xyflow-header-dark](https:\u002F\u002Fuser-images.githubusercontent.com\u002F2857535\u002F279644026-a01c231c-6c6e-4b41-96e0-a85c75c9acee.svg#gh-dark-mode-only)\n\n\u003Cdiv align=\"center\">\n\n![GitHub License MIT](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fwbkd\u002Freact-flow?color=%23ff0072)\n![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freactflow?color=%23FF0072&label=React%20Flow%20downloads)\n![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@xyflow\u002Fsvelte?color=%23FF3E00&label=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:\u002F\u002Freactflow.dev\u002F) · [Svelte Flow](https:\u002F\u002Fsvelteflow.dev\u002F) · [React Flow Pro](https:\u002F\u002Freactflow.dev\u002Fpro) · [Discord](https:\u002F\u002Fdiscord.gg\u002FBqt6xrs)\n\u003C\u002Fdiv>\n\n---\n\n## The xyflow mono repo\n\nThe xyflow repository is the home of four packages:\n* React Flow 12 `@xyflow\u002Freact` [packages\u002Freact](.\u002Fpackages\u002Freact)\n* React Flow 11 `reactflow` [v11 branch](https:\u002F\u002Fgithub.com\u002Fxyflow\u002Fxyflow\u002Ftree\u002Fv11)\n* Svelte Flow `@xyflow\u002Fsvelte` [packages\u002Fsvelte](.\u002Fpackages\u002Fsvelte)\n* Shared helper library `@xyflow\u002Fsystem` [packages\u002Fsystem](.\u002Fpackages\u002Fsystem)\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:\u002F\u002Freactflow.dev\u002Fpro) and for both of our libraries you can do it through [Github Sponsors](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fxyflow).\n\n## Getting started\n\nThe best way to get started is to check out the [React Flow](https:\u002F\u002Freactflow.dev\u002Flearn) or [Svelte Flow](https:\u002F\u002Fsvelteflow.dev\u002Flearn) 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>\n  \u003Csummary>\u003Cstrong>React Flow\u003C\u002Fstrong> basic usage\u003C\u002Fsummary>\n\n  ### Installation\n  \n  ```sh\nnpm install @xyflow\u002Freact\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\u002Freact';\n\nimport '@xyflow\u002Freact\u002Fdist\u002Fstyle.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    \u003CReactFlow\n      nodes={nodes}\n      edges={edges}\n      onNodesChange={onNodesChange}\n      onEdgesChange={onEdgesChange}\n      onConnect={onConnect}\n    >\n      \u003CMiniMap \u002F>\n      \u003CControls \u002F>\n      \u003CBackground \u002F>\n    \u003C\u002FReactFlow>\n  );\n}\n\nexport default Flow;\n```\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>\u003Cstrong>Svelte Flow\u003C\u002Fstrong> basic usage\u003C\u002Fsummary>\n\n  ### Installation\n  \n  ```sh\nnpm install @xyflow\u002Fsvelte\n  ```\n\n  ### Basic usage\n  ```svelte\n\u003Cscript lang=\"ts\">\n  import { writable } from 'svelte\u002Fstore';\n  import {\n    SvelteFlow,\n    Controls,\n    Background,\n    BackgroundVariant,\n    MiniMap,\n  } from '@xyflow\u002Fsvelte';\n\n  import '@xyflow\u002Fsvelte\u002Fdist\u002Fstyle.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\u002Fscript>\n\n\u003CSvelteFlow\n  {nodes}\n  {edges}\n  fitView\n  on:nodeclick={(event) => console.log('on node click', event)}\n>\n  \u003CControls \u002F>\n  \u003CBackground variant={BackgroundVariant.Dots} \u002F>\n  \u003CMiniMap \u002F>\n\u003C\u002FSvelteFlow>\n```\n\u003C\u002Fdetails>\n\n## Releases \n\nFor releasing packages we are using [changesets](https:\u002F\u002Fgithub.com\u002Fchangesets\u002Fchangesets) in combination with the [changeset Github action](https:\u002F\u002Fgithub.com\u002Fchangesets\u002Faction). 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:\u002F\u002Fxyflow.com)\n\nReact Flow and Svelte Flow are maintained by the [xyflow team](https:\u002F\u002Fxyflow.com\u002Fabout). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https:\u002F\u002Fxyflow.com\u002Fcontact) or by joining our [Discord Server](https:\u002F\u002Fdiscord.gg\u002FBqt6xrs).\n\n## License\n\nReact Flow and Svelte Flow are [MIT licensed](.\u002FLICENSE).\n","xyflow\u002Fxyflow 是一个强大的开源库，用于构建基于节点的用户界面，支持 React 和 Svelte 框架。其核心功能包括丰富的节点和边的自定义选项、内置迷你地图和控制组件等，使开发者能够轻松创建复杂且高度可定制的工作流或流程图应用。该库采用 TypeScript 编写，确保了代码的类型安全性和可维护性。适用于需要可视化工作流编辑器、流程图绘制工具或任何基于节点的交互式 UI 场景，如数据处理管道设计、项目管理软件中的任务关系展示等。MIT 许可证下免费使用，并提供商业支持选项。",2,"2026-06-11 02:44:25","top_all"]