Reference
<SvelteFlow />

<SvelteFlow />

Source on Github (opens in a new tab)

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

<script>
  import { writable } from 'svelte/store';
  import { SvelteFlow } from '@xyflow/svelte';
 
  const nodes = writable([
    { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },
    { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }
  ]);
 
  const edges = writable([
    { id: 'e1-2', source: 'a', target: 'b' }
  ]);
</script>
 
<SvelteFlow
  nodes={nodes}
  edges={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.

#nodes
A writable store with an array of nodes.
writable([])
#edges
A writable store with an array of edges.
writable([])
#nodeTypes
If you want to use custom nodes in your flow, you need to let Svelte Flow know about them. When rendering a new node, Svelte Flow will look up that node's type in this object and render the corresponding component.
#edgeTypes
As with node types, this prop lets you use custom edges in your flow by mapping edge types to Svelte components.
#colorMode
With this type you can switch between the built-in light and dark themes.
"light"
#nodeOrigin
[number, number]
The origin of the node to use when placing it in the flow or looking up its x and y position. An origin of [0,0] means that a node's top left corner will be placed at the x and y position.
[0,0]
#nodeDragThreshold
number
With a threshold greater than zero you can delay node drag events. If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
0
#style
string
#class
string

Viewport props

#initialViewport
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.
{ x: 0, y: 0, zoom: 1 }
#viewport
If you need more control over the viewport, you can pass a writable store.
undefined
#fitView
boolean
When true, the flow will be zoomed and panned to fit all the nodes initially provided.
false
#fitViewOptions
When you typically call fitView on a Svelte Flow instance, you can provide an object of options to customize its behaviour. This prop lets you do the same for the initial fitView call.
#minZoom
number
0.5
#maxZoom
number
2
#snapGrid
[number, number] | undefined
This prop configures the grid that nodes will snap to.
undefined
#onlyRenderVisibleElements
boolean
You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
false
#translateExtent
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
By default, Svelte Flow will render a small attribution in the bottom right corner of the flow. You can use this prop to change its position in case you want to place something else there.
"bottom-right"

Edge props

#defaultMarkerColor
string
"#b1b1b7"
#defaultEdgeOptions
Any defaults set here will be applied to all new edges that are added to the flow. Properties on a new edge will override these defaults if they exist.
#onedgecreate
(connection: Connection) => Edge
This handler gets called when a new edge is created. You can use it to modify the newly created edge.

Event handlers

General Events

#oninit
() => void
This handler gets called when the flow is initialized.
#onerror
(code: string, message: string) => void
Ocassionally something may happen that causes Svelte Flow to error. Instead of exploding your application, we log a message to the console and then call this handler. You might use it for additional logging or to show a message to the user.
#ondelete
(params: { nodes: Node[]; edges: Edge[] }) => void
This handler gets called when the user deletes nodes or edges.
#onbeforedelete
async (params: { nodes: Node[]; edges: Edge[] }) => boolean
This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false.

Node Events

#on:nodeclick
(event: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>) => void
#on:nodecontextmenu
(event: CustomEvent<{ event: MouseEvent; node: Node }>) => void
#on:nodemouseenter
(event: CustomEvent<{ event: MouseEvent; node: Node }>) => void
#on:nodemousemove
(event: CustomEvent<{ event: MouseEvent; node: Node }>) => void
#on:nodemouseleave
(event: CustomEvent<{ event: MouseEvent; node: Node }>) => void
#on:nodedragstart
(event: CustomEvent<{ event: MouseEvent; targetNode: Node | null; nodes: Node[] }>) => void
This event is used for single nodes and selections. If you drag a selection, targetNode is null
#on:nodedrag
(event: CustomEvent<{ event: MouseEvent; targetNode: Node | null; nodes: Node[] }>) => void
This event is used for single nodes and selections. If you drag a selection, targetNode is null
#on:nodedragstop
(event: CustomEvent<{ event: MouseEvent; targetNode: Node | null; nodes: Node[] }>) => void
This event is used for single nodes and selections. If you drag a selection, targetNode is null

Edge Events

#on:edgeclick
(event: CustomEvent<{ event: MouseEvent; edge: Edge }>) => void
#on:edgecontextmenu
(event: CustomEvent<{ event: MouseEvent; edge: Edge }>) => void

Connection Events

#onconnectstart
(event: MouseEvent | TouchEvent, params: { nodeId?: string; handleId?: string; handleType?: HandleType; }) => void
When a user starts to drag a connection line, this event gets fired.
#onconnect
(connection: Connection) => void
This event gets fired when a connection successfully completes.
#onconnectend
(event: MouseEvent | TouchEvent) => void
Whenever the user drops the connection line, this events get fired. No matter if a connection was created or not.

Pane Events

#on:paneclick
(event: CustomEvent<{ event: MouseEvent | TouchEvent }>) => void
#on:panecontextmenu
(event: CustomEvent<{ event: MouseEvent }>) => void

Keyboard props

#deleteKey
"Backspace"
#selectionKey
"Shift"
#multiSelectionKey
"Meta" for MacOs, "Control" for other systems
#zoomActivationKey
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, "Control" for other systems
#panActivationKey
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"

Interaction props

#nodesDraggable
boolean
Controls whether all nodes should be draggable or not. Individual nodes can override this setting by setting their draggable prop. If you want to use the mouse handlers on non-draggable nodes, you need to add the "nopan" class to those nodes.
true
#nodesConnectable
boolean
Controls whether all nodes should be connectable or not. Individual nodes can override this setting by setting their connectable prop.
true
#elementsSelectable
boolean
true
#autoPanOnConnect
boolean
true
#autoPanOnNodeDrag
boolean
true
#panOnDrag
boolean | (0 | 1 | 2 | 3 | 4)[]
Enabling 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. For example, [0,2] would allow panning with the left and right mouse buttons.
true
#selectionMode
"partial" | "full"
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
false
#panOnScrollSpeed
number
#panOnScrollMode
"free" | "horizontal" | "vertical"
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
true
#zoomOnPinch
boolean
true
#zoomOnDoubleClick
boolean
true
#connectionMode
"loose" | "strict"
A loose connection mode will allow you to connect handles of any type to one another. The strict mode will only allow you to connect source handles to target handles.
"strict"

Connection line props

#isValidConnection
(connection: Connection) => boolean
This prop allows you to control which connections are valid. It gets called before an edge is created.
() => true
#connectionRadius
number
The radius around a handle where you drop a connection line to create a new edge.
20
#connectionLineType
The type of edge path to use for connection lines. Although created edges can be of any type, Svelte Flow needs to know what type of path to render for the connection line before the edge is created!
ConnectionLineType.Bezier
#connectionLineStyle
string
#connectionLineWrapperStyles
string

Notes

  • The props of this component get exported as SvelteFlowProps