Yeah! Svelte Flow 1.0. is here 🚀

Svelte Flow 1.0 is based on Svelte 5 and introduces a lot of new features and improvements. Please refer to the migration guide to see how to upgrade.

New features

• Reconnect edges: You can reconnect your edges by using the new <EdgeReconnectAnchor /> component. It can be used to add custom reconnection points on custom edges.
• Keyboard navigation & A11y: We added support for keyboard navigation and improved accessibility for screen readers. You can now tab through nodes and edges and move nodes with the arrow keys. Can be disabled via disableKeyboardA11y
• Click connect: You can now create a new connection by clicking on a handle one by one.
• Enhanced ViewportPortal: You can now decide if you want to render something below or above the nodes & edges in the viewport.
• Improved fitView: We finetuned the fitView function to better work with dynamically added nodes.
• colorModeSSR prop: You can pass a fallback color mode for server side rendering when colorMode is set to system.
• elevateNodesOnSelect & elevateEdgesOnSelect: Control if nodes & edges should be elevated via z-index when selected.
• noDragClass, noWheelClass, noPanClass: You can now modify the class name used to disable dragging, panning and zooming.
• onselectionchange & useOnSelectionChange: You can now listen to selection changes via a callback