{"_id":"@avario/xyflow-monorepo","name":"@avario/xyflow-monorepo","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@avario/xyflow-monorepo","version":"0.0.0","description":"A highly customizable React library for building node-based editors and interactive flow charts","repository":{"type":"git","url":"git+ssh://git@github.com/avario/xyflow.git"},"license":"MIT","private":false,"scripts":{"preinstall":"npx only-allow pnpm","dev":"turbo run dev --parallel --concurrency 12","dev:svelte":"turbo run dev --filter=svelte-examples...","dev:react":"turbo run dev --filter=react-examples...","test:svelte":"pnpm --filter=playwright run test:svelte","test:svelte:ui":"pnpm --filter=playwright run test:svelte:ui","test:react":"pnpm --filter=playwright run test:react","test:react:ui":"pnpm --filter=playwright run test:react:ui","build:all":"turbo run build","build":"turbo run build --filter=./packages/**","lint":"turbo run lint --filter=./packages/**","typecheck":"turbo run typecheck --filter=./packages/**","release":"changeset publish","clean":"pnpm -r --parallel exec rimraf dist .turbo node_modules"},"devDependencies":{"@changesets/changelog-github":"^0.4.7","@changesets/cli":"^2.25.0","@playwright/test":"^1.44.1","concurrently":"^7.6.0","eslint":"^8.22.0","prettier":"^2.7.1","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","rollup":"^4.18.0","turbo":"^2.0.3","typescript":"5.4.5"},"packageManager":"pnpm@9.2.0","workspaces":["tooling/*","packages/*"],"_id":"@avario/xyflow-monorepo@0.0.0","gitHead":"bc98bf2402541d97633a44c4dce300cee19e414b","bugs":{"url":"https://github.com/avario/xyflow/issues"},"homepage":"https://github.com/avario/xyflow#readme","_nodeVersion":"23.11.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-/roxXvbAcVTzxT+GIprZNNXaalT0hl36+DqfIRUxTbkPZPwv7Cdao6l/xuT294UOjkrprcHe2+M4jV0bQbQHYg==","shasum":"827509404c2c02cbd73c76b4f4d09194f88606e0","tarball":"https://registry.npmjs.org/@avario/xyflow-monorepo/-/xyflow-monorepo-0.0.0.tgz","fileCount":877,"unpackedSize":2422355,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD/AzLTzdjul6kIoBh498stONighdbzlYKCWt6as/rH0wIgO/UIZR74kvIASpKeiFfUkUtZWIfIxX19XZy48kygkmA="}]},"_npmUser":{"name":"avario","email":"avario@hotmail.com"},"directories":{},"maintainers":[{"name":"avario","email":"avario@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/xyflow-monorepo_0.0.0_1766810536087_0.19761074735413153"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-27T04:42:15.968Z","0.0.0":"2025-12-27T04:42:16.267Z","modified":"2025-12-27T04:42:16.586Z"},"maintainers":[{"name":"avario","email":"avario@hotmail.com"}],"description":"A highly customizable React library for building node-based editors and interactive flow charts","homepage":"https://github.com/avario/xyflow#readme","repository":{"type":"git","url":"git+ssh://git@github.com/avario/xyflow.git"},"bugs":{"url":"https://github.com/avario/xyflow/issues"},"license":"MIT","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<div align=\"center\">\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&label=React%20Flow%20downloads)\n![npm downloads](https://img.shields.io/npm/dt/@xyflow/svelte?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://reactflow.dev/) · [Svelte Flow](https://svelteflow.dev/) · [React Flow Pro](https://reactflow.dev/pro) · [Discord](https://discord.gg/Bqt6xrs)\n</div>\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<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## 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. changset 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## The xyflow team\n\nReact Flow and Svelte Flow are maintained by the team behind [xyflow](https://xyflow.com). 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- Christopher • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)\n- Hayleigh • [Twitter](https://twitter.com/hayleighdotdev) • [Github](https://github.com/hayleigh-dot-dev)\n- Abbey • [Github](https://github.com/printerscanner)\n- Moritz • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)\n- Peter • [Github](https://github.com/peterkogo)\n\n\n## License\n\nReact Flow and Svelte Flow are [MIT licensed](./LICENSE).\n","readmeFilename":"README.md","_rev":"1-9fd9f8a05e3efa7fa2253e23c112c374"}