npm / @xyflow/svelte
@xyflow/svelte
What changed in @xyflow/svelte 1, from its official release notes, upgrade guides and advisories. Sources checked 2026-11-12.
15 breaking19 new APIs and options1 performance9 behavior and defaults34 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli init@xyflow/svelte 178 changes
Breaking changes 15
Removes the unused CSS variable, so developers should not rely on it.
Using
handleIdwithouthandleTypenow produces a type error.The
edgeIdprop was removed fromEdgeToolbar, so callers should no longer pass it.The edges prop on SvelteFlow must now be bound, including when using function bindings for edges in a separate module.
The nodes prop on SvelteFlow must now be bound, including when using function bindings for nodes in a separate module.
Replaces EdgeLabelRenderer, automatically handles label clicks, and knows which edge it belongs to.
The EdgeLabelRenderer component is renamed to EdgeLabel.
Edges now use $state.raw instead of writable and must be treated as immutable; reassign the array to trigger updates.
Nodes now use $state.raw instead of writable and must be treated as immutable; reassign the array to trigger updates.
Replaces onEdgeCreate as the callback called before a new edge is created.
The old onEdgeCreate callback is replaced by onbeforeconnect, which is called before a new edge is created.
Custom node and edge props now use Svelte 5 $props() destructuring instead of $$Props and export let declarations.
Hooks return reactive values rather than writables, exposed through a .current property; reassignments to .current work for useEdges.
Hooks return reactive values rather than writables, exposed through a .current property; reassignments to .current work for useNodes.
Hooks return reactive values rather than writables, exposed through a .current property.
New APIs and options 19
Adds auto-pan when a user drags a selection close to the viewport edge.
Exports the
NodeHandletype for use by developers.Adds zIndexMode to control how z-index is calculated for nodes and edges.
MiniMapNodenow receivesnodeId.Adds the EdgeToolbar component.
Adds the
resizeDirectionprop to ResizeControls.Viewport binding now works natively in Svelte 5 and can bind a user-provided viewport object.
Provides a fallback color mode for server-side rendering when colorMode is set to ‘system’.
Adds a prop for providing a custom connection line instead of using the connectionLine slot.
Adds support for disabling keyboard navigation and accessibility features for screen readers.
Adds a component for custom reconnection points on custom edges.
Controls whether selected edges are elevated via z-index.
Controls whether selected nodes are elevated via z-index.
Lets you modify the class name used to disable dragging.
Lets you modify the class name used to disable panning.
Lets you modify the class name used to disable zooming.
Adds a callback for listening to selection changes.
Adds a hook for listening to selection changes.
Lets you choose whether portal content renders below or above nodes and edges in the viewport.
Performance 1
Nodes are repainted less excessively during pan and zoom.
Behavior and default changes 9
A log is shown in development when a user hides attribution.
Control can activate pane panning with a primary-button drag.
Middle-mouse viewport panning can now start from a selection rectangle.
Child nodes of different parents are prevented from overlapping.
NodeResizer props can now change during an ongoing resize.
A selection can now be started above a node.
Allows creating a connection by clicking on handles one by one.
Is finetuned to work better with dynamically added nodes.
Adds keyboard navigation through nodes and edges, including moving nodes with the arrow keys.
Fixes and other changes 34
Respects nodeOrigin when passed a node object instead of
{ id }.Clicking the pane cancels a pending click connection and calls onClickConnectEnd / onclickconnectend.
onresizeend now always fires after onresizestart.
Fixes incorrect values during resize when shouldResize returns false.
The attribution warning is prevented when the pane is not rendered either.
An edge is hidden if a connected node is hidden.
All properties in the provider store are reset when the flow unmounts.
Unnecessary edge rerenders are fixed.
Fixes MiniMap zooming out to include the origin when every node is hidden.
Fixes
extent: 'parent'not immediately resolving when the parent haswidthorinitialWidth.Prevents a selection box from appearing when dragging the pane via touch, and prefers touch panning over drag selection with mouse-button-specific
panOnDragsettings.Fixes FinalConnectionState so it preserves the discriminated union.
The pane click handler no longer fires when a connection ends on the pane.
Passes the aria label through to the node DOM element.
Checks whether
windowis defined before calling browser functions.Fixes control button props so changes to them are reactive.
Fixes node resizing beyond absolute extents.
Generic types better reflect custom node and edge data.
The type field may be omitted; a missing type is equivalent to type: "default".
Options are now passed correctly to useSvelteFlow viewport helper functions.
isValidConnection stays up to date during an ongoing connection, so its current value is used.
Child nodes now update on the Minimap when their parent is dragged.
onConnectEnd stays up to date during an ongoing connection, so its current value is used.
The return type is improved, allowing the data type to be narrowed by checking the node type.
An ongoing connection is updated when the user moves a node with the keyboard.
The current pointer position is passed to the connection.
Fixes node positions when resizing nodes with a non-default node origin.
Fixes onPaneClick firing when the viewport is moved.
onPaneClickevents are no longer suppressed whenselectionOnDrag=true.The selection box no longer appears when no nodes are selected.
The selection box no longer shows a focus outline.
Prevents the mini map from crashing when all nodes are hidden.
Always calls onMoveEnd when onMoveStart was called.
Fixes eagerly setting selected to false on every node and edge.