<SvelteFlow />

The <SvelteFlow /> component is the heart of your Svelte Flow application.


<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },
    { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: 'a', target: 'b' }
  ]);
</script>
 
<SvelteFlow
  bind:nodes
  bind:edges
  fitView
/>

This component takes a lot of different props, most of which are optional. We’ve tried to document them in groups that make sense to help you find your way.

Common props

These are the props you will most commonly use when working with Svelte Flow.

Name	Type	Default
`width`	`number` Sets a fixed width for the flow
`height`	`number` Sets a fixed height for the flow
`nodes`	`Node[]` An array of nodes to render in a flow.
`edges`	`Edge[]` An array of edges to render in a flow.
`nodeTypes`	`NodeTypes` Custom node types to be available in a flow. Svelte Flow matches a node’s type to a component in the nodeTypes object.
`edgeTypes`	`EdgeTypes` Custom edge types to be available in a flow. Svelte Flow matches an edge’s type to a component in the edgeTypes object.
`colorMode`	`ColorMode` Controls color scheme used for styling the flow	`'system'`
`colorModeSSR`	`Omit<ColorMode, "system">` Fallback color mode for SSR if colorMode is set to ‘system’
`proOptions`	`ProOptions` By default, we render a small attribution in the corner of your flows that links back to the project. You are free to remove this attribution but we ask that you take a quick look at our https://svelteflow.dev/learn/troubleshooting/remove-attribution removing attribution guide before doing so.
`...props`	`HTMLAttributes<HTMLDivElement>`

Viewport props

Name	Type	Default
`viewport`	`Viewport` Custom viewport to be used instead of internal one
`initialViewport`	`Viewport` Sets the initial position and zoom of the viewport. If a default viewport is provided but fitView is enabled, the default viewport will be ignored.	`{ zoom: 1, position: { x: 0, y: 0 } }`
`fitView`	`boolean` If set, initial viewport will show all nodes & edges
`fitViewOptions`	`FitViewOptions<Node>` Options to be used in combination with fitView
`minZoom`	`number` Minimum zoom level	`0.5`
`maxZoom`	`number` Maximum zoom level	`2`
`snapGrid`	`SnapGrid` Grid all nodes will snap to
`onlyRenderVisibleElements`	`boolean` You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport. This might improve performance when you have a large number of nodes and edges but also adds an overhead.	`false`
`translateExtent`	`CoordinateExtent` By default the viewport extends infinitely. You can use this prop to set a boundary. The first pair of coordinates is the top left boundary and the second pair is the bottom right.	`[[-∞, -∞], [+∞, +∞]]`
`preventScrolling`	`boolean` Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.	`true`
`attributionPosition`	`PanelPosition` Set position of the attribution	`'bottom-right'`

Node props

Name	Type	Default
`nodeOrigin`	`NodeOrigin` Defines nodes relative position to its coordinates	`[0, 0]`
`nodesDraggable`	`boolean` Controls if all nodes should be draggable	`true`
`nodesConnectable`	`boolean` Controls if all nodes should be connectable to each other	`true`
`nodesFocusable`	`boolean` When `true`, focus between nodes can be cycled with the `Tab` key and selected with the `Enter` key. This option can be overridden by individual nodes by setting their `focusable` prop.	`true`
`nodeDragThreshold`	`number` With a threshold greater than zero you can control the distinction between node drag and click events. If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.	`1`
`nodeClickDistance`	`number` Distance that the mouse can move between mousedown/up that will trigger a click	`0`
`nodeExtent`	`CoordinateExtent` By default the nodes can be placed anywhere. You can use this prop to set a boundary. The first pair of coordinates is the top left boundary and the second pair is the bottom right.	`[[-∞, -∞], [+∞, +∞]]`
`elevateNodesOnSelect`	`boolean` Enabling this option will raise the z-index of nodes when they are selected.	`true`

Edge props

Name	Type	Default
`edgesFocusable`	`boolean` When `true`, focus between edges can be cycled with the `Tab` key and selected with the `Enter` key. This option can be overridden by individual edges by setting their `focusable` prop.	`true`
`elevateEdgesOnSelect`	`boolean` Enabling this option will raise the z-index of edges when they are selected, or when the connected nodes are selected.	`true`
`defaultMarkerColor`	`string` Color of edge markers
`defaultEdgeOptions`	`DefaultEdgeOptions` Defaults to be applied to all new edges that are added to the flow. Properties on a new edge will override these defaults if they exist.

Event handlers

General Events

Name	Type	Default
`oninit`	`() => void` This handler gets called when the flow is finished initializing
`onflowerror`	`OnError` Ocassionally something may happen that causes Svelte Flow to throw an error. Instead of exploding your application, we log a message to the console and then call this event handler. You might use it for additional logging or to show a message to the user.
`ondelete`	`OnDelete<Node, Edge>` This handler gets called when the user deletes nodes or edges.
`onbeforedelete`	`OnBeforeDelete<Node, Edge>` This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false.

Node Events

Name	Type	Default
`onnodeclick`	`NodeEventWithPointer<MouseEvent \| TouchEvent, Node>` This event handler is called when a user clicks on a node.
`onnodedragstart`	`NodeTargetEventWithPointer<MouseEvent \| TouchEvent, Node>` This event handler is called when a user starts to drag a node.
`onnodedrag`	`NodeTargetEventWithPointer<MouseEvent \| TouchEvent, Node>` This event handler is called when a user drags a node.
`onnodedragstop`	`NodeTargetEventWithPointer<MouseEvent \| TouchEvent, Node>` This event handler is called when a user stops dragging a node.
`onnodepointerenter`	`NodeEventWithPointer<PointerEvent, Node>` This event handler is called when the pointer of a user enters a node.
`onnodepointermove`	`NodeEventWithPointer<PointerEvent, Node>` This event handler is called when the pointer of a user moves over a node.
`onnodepointerleave`	`NodeEventWithPointer<PointerEvent, Node>` This event handler is called when the pointer of a user leaves a node.
`onnodecontextmenu`	`NodeEventWithPointer<MouseEvent, Node>` This event handler is called when a user right-clicks on a node.

Edge Events

Name	Type	Default
`onedgeclick`	`({ edge, event }: { edge: Edge; event: MouseEvent; }) => void` This event handler is called when a user clicks an edge.
`onedgecontextmenu`	`({ edge, event }: { edge: Edge; event: MouseEvent; }) => void` This event handler is called when a user right-clicks an edge.
`onedgepointerenter`	`({ edge, event }: { edge: Edge; event: PointerEvent; }) => void` This event handler is called when the pointer of a user enters an edge.
`onedgepointerleave`	`({ edge, event }: { edge: Edge; event: PointerEvent; }) => void` This event handler is called when the pointer of a user enters an edge.
`onreconnect`	`OnReconnect<Edge>` This event gets fired when after an edge was reconnected
`onreconnectstart`	`OnReconnectStart<Edge>` This event gets fired when a user starts to reconnect an edge
`onreconnectend`	`OnReconnectEnd<Edge>` This event gets fired when a user stops reconnecting an edge
`onbeforereconnect`	`OnBeforeReconnect<Edge>` This handler gets called when an edge is reconnected. You can use it to modify the edge before the update is applied.

Selection Events

Name	Type	Default
`onselectionchanged`	`unknown`
`onselectionclick`	`NodesEventWithPointer<MouseEvent, Node>` This event handler is called when a user clicks the selection box.
`onselectioncontextmenu`	`NodesEventWithPointer<MouseEvent, Node>` This event handler is called when a user right-clicks the selection box.
`onselectiondragstart`	`OnSelectionDrag<Node>` This event handler gets called when a user starts to drag a selection box.
`onselectiondrag`	`OnSelectionDrag<Node>` This event handler gets called when a user drags a selection box.
`onselectiondragstop`	`OnSelectionDrag<Node>` This event handler gets called when a user stops dragging a selection box.
`onselectionstart`	`(event: PointerEvent) => void` This event handler gets called when the user starts to drag a selection box
`onselectionend`	`(event: PointerEvent) => void` This event handler gets called when the user finishes dragging a selection box

Pane Events

Name	Type	Default
`onpaneclick`	`({ event }: { event: MouseEvent; }) => void` This event handler is called when a user clicks the pane.
`onpanecontextmenu`	`({ event }: { event: MouseEvent; }) => void` This event handler is called when a user right-clicks the pane.
`onmovestart`	`OnMove` This event handler is called when the user begins to pan or zoom the viewport
`onmove`	`OnMove` This event handler is called when the user pans or zooms the viewport
`onmoveend`	`OnMove` This event handler is called when the user stops panning or zooming the viewport

Connection Events

Name	Type	Default
`onconnect`	`OnConnect` This event gets fired when a connection successfully completes and an edge is created.
`onconnectstart`	`OnConnectStart` When a user starts to drag a connection line, this event gets fired.
`onbeforeconnect`	`OnBeforeConnect<Edge>` This handler gets called when a new edge is created. You can use it to modify the newly created edge.
`onconnectend`	`OnConnectEnd` When a user stops dragging a connection line, this event gets fired.
`isValidConnection`	`IsValidConnection`
`clickConnect`	`boolean` Toggles ability to make connections via clicking the handles
`onclickconnectstart`	`OnConnectStart` A connection is started by clicking on a handle
`onclickconnectend`	`OnConnectEnd` A connection is finished by clicking on a handle

Connection line props

Name	Type	Default
`connectionRadius`	`number` The radius around a handle where you drop a connection line to create a new edge.	`20`
`connectionLineComponent`	`Component<{}, {}, string>` Provide a custom snippet to be used insted of the default connection line
`connectionLineType`	`ConnectionLineType` Choose from the built-in edge types to be used for connections	`'default' \| ConnectionLineType.Bezier`
`connectionLineStyle`	`string` Styles to be applied to the connection line
`connectionLineContainerStyle`	`string` Styles to be applied to the container of the connection line

Interaction props

Name	Type	Default
`elementsSelectable`	`boolean` Controls if all elements should (nodes & edges) be selectable	`true`
`autoPanOnConnect`	`boolean` You can enable this prop to automatically pan the viewport while making a new connection.	`true`
`autoPanOnNodeDrag`	`boolean` You can enable this prop to automatically pan the viewport while dragging a node.	`true`
`selectNodesOnDrag`	`boolean` Controls if nodes should be automatically selected when being dragged
`panOnDrag`	`boolean \| number[]` Enableing this prop allows users to pan the viewport by clicking and dragging. You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.	`true`
`selectionOnDrag`	`boolean` Select multiple elements with a selection box, without pressing down selectionKey.	`false`
`selectionMode`	`SelectionMode` When set to “partial”, when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.	`'full'`
`panOnScroll`	`boolean` Controls if the viewport should pan by scrolling inside the container Can be limited to a specific direction with panOnScrollMode	`false`
`panOnScrollMode`	`PanOnScrollMode` This prop is used to limit the direction of panning when panOnScroll is enabled. The “free” option allows panning in any direction.	`"free"`
`zoomOnScroll`	`boolean` Controls if the viewport should zoom by scrolling inside the container.	`true`
`zoomOnPinch`	`boolean` Controls if the viewport should zoom by pinching on a touch screen	`true`
`zoomOnDoubleClick`	`boolean` Controls if the viewport should zoom by double clicking somewhere on the flow	`true`
`connectionMode`	`ConnectionMode` ‘strict’ connection mode will only allow you to connect source handles to target handles. ‘loose’ connection mode will allow you to connect handles of any type to one another.	`'strict'`
`paneClickDistance`	`number` Distance that the mouse can move between mousedown/up that will trigger a click	`0`

Keyboard props

Name	Type	Default
`deleteKey`	`KeyDefinition \| KeyDefinition[] \| null` Pressing down this key deletes all selected nodes & edges.	`'Backspace'`
`selectionKey`	`KeyDefinition \| KeyDefinition[] \| null` Pressing down this key you can select multiple elements with a selection box.	`'Shift'`
`multiSelectionKey`	`KeyDefinition \| KeyDefinition[] \| null` Pressing down this key you can select multiple elements by clicking.	`'Meta' for macOS, "Ctrl" for other systems`
`zoomActivationKey`	`KeyDefinition \| KeyDefinition[] \| null` If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. By setting this prop to null you can disable this functionality.	`'Meta' for macOS, "Ctrl" for other systems`
`panActivationKey`	`KeyDefinition \| KeyDefinition[] \| null` If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. By setting this prop to null you can disable this functionality.	`'Space'`
`disableKeyboardA11y`	`boolean` You can use this prop to disable keyboard accessibility features such as selecting nodes or moving selected nodes with the arrow keys.	`false`

Style props

Applying certain classes to elements rendered inside the canvas will change how interactions are handled. These props let you configure those class names if you need to.

Name	Type	Default
`noPanClass`	`string` If an element in the canvas does not stop mouse events from propagating, clicking and dragging that element will pan the viewport. Adding the `"nopan"` class prevents this behavior and this prop allows you to change the name of that class.	`"nopan"`
`noDragClass`	`string` If a node is draggable, clicking and dragging that node will move it around the canvas. Adding the `"nodrag"` class prevents this behavior and this prop allows you to change the name of that class.	`"nodrag"`
`noWheelClass`	`string` Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport. Adding the `"nowheel"` class to an element n the canvas will prevent this behavior and this prop allows you to change the name of that class.	`"nowheel"`

Notes

The props of this component get exported as SvelteFlowProps