Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.
npm install @xyflow/svelte!readme-header
!readme-header-dark
!GitHub License MIT
!npm downloads
Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow.
☣️ Svelte Flow is still alpha and currently under heavy development. The API is relatively stable but some things might change. ☣️
🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord
- Easy to use: Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
- Fast rendering: Only nodes that have changed are re-rendered
- Hooks and Utils: Hooks for handling nodes, edges and the viewport and graph helper functions
- Plugin Components: Background, MiniMap and Controls
- Reliable: Written in Typescript and tested with Playwright
The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:
``sh`
npm install @xyflow/svelte
You only need a few lines to get a fully interactive (e.g. select and drag nodes or pan and zoom) flow. If you want to learn more, please refer to the learn section, the examples or the API reference.
`svelte
`
Show us what you make: Drop it in into our Discord Server, tweet at us, or email us at info@xyflow.com
Community Participation: Ask and answer questions in our Discord Server or jump in on Github discussions.
Squash Bugs: We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.
Financial Support: If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at info@xyflow.com
And of course, we love Github stars ⭐
If you want to check out the current version you need to run the following command from the root directory:
1. pnpm install - install dependenciespnpm build
2. - needs to be done oncepnpm dev` - starts dev server
3.
You can now access the examples under http://127.0.0.1:5173
Svelte Flow is maintained by the team behind xyflow. If you need help or want to talk to us about a collaboration, reach out through our contact form or by joining our Discord Server.
- Christopher • Twitter • Github
- Hayleigh • Twitter • Github
- John • Website • Mastodon
- Moritz • Twitter • Github
- Peter • Github
Svelte Flow is MIT licensed.