<SvelteFlow />

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.

Name	Type	Default
#`nodes`	`Writable<Node[]>` A writable store with an array of nodes.	`writable([])`
#`edges`	`Writable<Edge[]>` A writable store with an array of edges.	`writable([])`
#`nodeTypes`	`Record<string, ComponentType<SvelteComponent<NodeProps>>>` 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`	`Record<string, ComponentType<SvelteComponent<EdgeProps>>>` As with node types, this prop lets you use custom edges in your flow by mapping edge types to Svelte components.
#`colorMode`	`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

Name	Type	Default
#`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.	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`Writable<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`	`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`	`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` 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

Name	Type	Default
#`defaultMarkerColor`	`string`	`"#b1b1b7"`
#`defaultEdgeOptions`	`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.

Event handlers

General Events

Name	Type
#`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.

Node Events

Name	Type
#`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; node: NodeBase; nodes: NodeBase[] }>) => void`
#`on:nodedrag`	`(event: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>) => void`
#`on:nodedragstop`	`(event: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>) => void`

Edge Events

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

Connection Events

Name	Type
#`on:connectstart`	`(event: CustomEvent<{ event: MouseEvent \| TouchEvent; nodeId?: string; handleId?: string; handleType?: HandleType; }>) => void` When a user starts to drag a connection line, this event gets fired.
#`on:connect`	`(event: CustomEvent<{ connection: Connection }>) => void` This event gets fired when a connection successfully completes.
#`on:connectend`	`(event: CustomEvent<{ 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

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

Keyboard props

Name	Type	Default
#`deleteKey`	`KeyDefinition \| null`	`"Backspace"`
#`selectionKey`	`KeyDefinition \| null`	`"Shift"`
#`multiSelectionKey`	`KeyDefinition \| null`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKey`	`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, "Control" for other systems`
#`panActivationKey`	`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"`

Interaction props

Name	Type	Default
#`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)[]` 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. 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

Name	Type	Default
#`isValidConnection`	`IsValidConnection` 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`	`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

API Reference <SvelteFlowProvider />