# What changed in @xyflow/svelte

> 78 changes in @xyflow/svelte 1 from its official release notes, upgrade guides and advisories: 15 breaking, 19 new APIs and options. Each one cited. Sources checked 2026-11-12. HTML: https://unstale.sh/npm/@xyflow/svelte/

To see which of these apply to a repository, run `npx @unstale/cli init` in it.

## @xyflow/svelte 1

### Breaking changes

- Removes the unused CSS variable, so developers should not rely on it. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Using `handleId` without `handleType` now produces a type error. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- The `edgeId` prop was removed from `EdgeToolbar`, so callers should no longer pass it. (1.4.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.1)
- The edges prop on SvelteFlow must now be bound, including when using function bindings for edges in a separate module. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- The nodes prop on SvelteFlow must now be bound, including when using function bindings for nodes in a separate module. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Replaces EdgeLabelRenderer, automatically handles label clicks, and knows which edge it belongs to. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- The EdgeLabelRenderer component is renamed to EdgeLabel. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Edges now use $state.raw instead of writable and must be treated as immutable; reassign the array to trigger updates. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Nodes now use $state.raw instead of writable and must be treated as immutable; reassign the array to trigger updates. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Replaces onEdgeCreate as the callback called before a new edge is created. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- The old onEdgeCreate callback is replaced by onbeforeconnect, which is called before a new edge is created. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Custom node and edge props now use Svelte 5 $props() destructuring instead of $$Props and export let declarations. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Hooks return reactive values rather than writables, exposed through a .current property; reassignments to .current work for useEdges. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Hooks return reactive values rather than writables, exposed through a .current property; reassignments to .current work for useNodes. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Hooks return reactive values rather than writables, exposed through a .current property. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)

### New APIs and options

- Adds auto-pan when a user drags a selection close to the viewport edge. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Exports the `NodeHandle` type for use by developers. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Adds zIndexMode to control how z-index is calculated for nodes and edges. (1.5.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.0)
- `MiniMapNode` now receives `nodeId`. (1.4.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.1)
- Adds the EdgeToolbar component. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- Adds the `resizeDirection` prop to ResizeControls. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- Viewport binding now works natively in Svelte 5 and can bind a user-provided viewport object. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Provides a fallback color mode for server-side rendering when colorMode is set to ‘system’. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Adds a prop for providing a custom connection line instead of using the connectionLine slot. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1)
- Adds support for disabling keyboard navigation and accessibility features for screen readers. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Adds a component for custom reconnection points on custom edges. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Controls whether selected edges are elevated via z-index. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Controls whether selected nodes are elevated via z-index. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Lets you modify the class name used to disable dragging. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Lets you modify the class name used to disable panning. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Lets you modify the class name used to disable zooming. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Adds a callback for listening to selection changes. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Adds a hook for listening to selection changes. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Lets you choose whether portal content renders below or above nodes and edges in the viewport. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)

### Performance

- Nodes are repainted less excessively during pan and zoom. (1.7.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.7.1)

### Behavior and default changes

- A log is shown in development when a user hides attribution. (1.6.4) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.4)
- Control can activate pane panning with a primary-button drag. (1.6.3) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.3)
- Middle-mouse viewport panning can now start from a selection rectangle. (1.6.3) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.3)
- Child nodes of different parents are prevented from overlapping. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- NodeResizer props can now change during an ongoing resize. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- A selection can now be started above a node. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- Allows creating a connection by clicking on handles one by one. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Is finetuned to work better with dynamically added nodes. (1.0.0) — [upgrade guide](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1), [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)
- Adds keyboard navigation through nodes and edges, including moving nodes with the arrow keys. (1.0.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.0.0)

### Fixes and other changes

- Respects nodeOrigin when passed a node object instead of `{ id }`. (1.7.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.7.1)
- Clicking the pane cancels a pending click connection and calls onClickConnectEnd / onclickconnectend. (1.7.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.7.1)
- onresizeend now always fires after onresizestart. (1.7.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.7.0)
- Fixes incorrect values during resize when shouldResize returns false. (1.7.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.7.0)
- The attribution warning is prevented when the pane is not rendered either. (1.6.6) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.6)
- An edge is hidden if a connected node is hidden. (1.6.6) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.6)
- All properties in the provider store are reset when the flow unmounts. (1.6.6) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.6)
- Unnecessary edge rerenders are fixed. (1.6.4) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.4)
- Fixes MiniMap zooming out to include the origin when every node is hidden. (1.6.4) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.4)
- Fixes `extent: 'parent'` not immediately resolving when the parent has `width` or `initialWidth`. (1.6.3) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.3)
- Prevents a selection box from appearing when dragging the pane via touch, and prefers touch panning over drag selection with mouse-button-specific `panOnDrag` settings. (1.6.3) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.3)
- Fixes FinalConnectionState so it preserves the discriminated union. (1.6.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.1)
- The pane click handler no longer fires when a connection ends on the pane. (1.6.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.1)
- Passes the aria label through to the node DOM element. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Checks whether `window` is defined before calling browser functions. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Fixes control button props so changes to them are reactive. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Fixes node resizing beyond absolute extents. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- Generic types better reflect custom node and edge data. (1.6.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.6.0)
- The type field may be omitted; a missing type is equivalent to type: "default". (1.5.2) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.2)
- Options are now passed correctly to useSvelteFlow viewport helper functions. (1.5.2) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.2)
- isValidConnection stays up to date during an ongoing connection, so its current value is used. (1.5.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.1)
- Child nodes now update on the Minimap when their parent is dragged. (1.5.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.1)
- onConnectEnd stays up to date during an ongoing connection, so its current value is used. (1.5.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.1)
- The return type is improved, allowing the data type to be narrowed by checking the node type. (1.5.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.1)
- An ongoing connection is updated when the user moves a node with the keyboard. (1.5.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.5.0)
- The current pointer position is passed to the connection. (1.4.2) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.2)
- Fixes node positions when resizing nodes with a non-default node origin. (1.4.2) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.2)
- Fixes onPaneClick firing when the viewport is moved. (1.4.2) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.2)
- `onPaneClick` events are no longer suppressed when `selectionOnDrag=true`. (1.4.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.1)
- The selection box no longer appears when no nodes are selected. (1.4.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.1)
- The selection box no longer shows a focus outline. (1.4.1) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.1)
- Prevents the mini map from crashing when all nodes are hidden. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- Always calls onMoveEnd when onMoveStart was called. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)
- Fixes eagerly setting selected to false on every node and edge. (1.4.0) — [release notes](https://github.com/xyflow/xyflow/releases/tag/%40xyflow/svelte%401.4.0)