Svelte Flow is still alpha! Check out the latest changes here.
Reference
Hooks
useSvelteFlow()

useSvelteFlow

Source on GitHub (opens in a new tab)

This hook returns functions to update the viewport, transform positions or get node intersections for example.

<script lang="ts">
  import { useSvelteFlow } from '@xyflow/svelte';
 
  const { screenToFlowPosition, zoomIn } = useSvelteFlow();
</script>

Signature

#Returns
#getNode
(id: string) => Node | undefined
Returns a node by id.
#getNodes
(nodeIds?: string[]) => Node[]
Returns all nodes if no ids are passed or the nodes of the passed ids.
#getInternalNode
(id: string) => InternalNode | undefined
Returns an internal node by id.
#getEdge
(id: string) => Edge | undefined
Returns an edge by id.
#getEdges
(edgeIds?: string[]) => Node[]
Returns all edges if no ids are passed or the edges of the passed ids.
#zoomIn
Function
#zoomIn
Function
#zoomOut
Function
#setZoom
(zoomLevel: number, options?: ViewportHelperFunctionOptions) => void
#getZoom
() => number
#setCenter
(x: number, y: number, options?: SetCenterOptions) => void
#setViewport
(viewport: Viewport, options?: ViewportHelperFunctionOptions) => void
#getViewport
() => Viewport
#fitView
(options?: FitViewOptions) => void
#getIntersectingNodes
( nodeOrRect: Node | { id: string } | Rect, partially?: boolean, nodesToIntersect?: Node[] ) => Node[]
#isNodeIntersecting
( nodeOrRect: Node | { id: string } | Rect, area: Rect, partially?: boolean ) => boolean
#fitBounds
(bounds: Rect, options?: FitBoundsOptions) => void
#deleteElements
async ({ nodes, edges }: { nodes?: Node[] | { id: string }[], edges?: Edge[] | { id: string }[] }) => { deletedNodes: Node[]; deletedEdges: Edge[] }
Helper function to remove nodes and edges that also deletes connected edges and child nodes.
#screenToFlowPosition
(position: XYPosition) => XYPosition
Transforms a screen position to a Svelte position.
#flowToScreenPosition
(position: XYPosition) => XYPosition
Transforms a Svelte position to a screen position.
#updateNode
(id: string, node: Node | (node: Node) => Partial<Node>, options?: { replace: boolean }) => void
Function for updating a node. The passed node or function result gets merged into to the existing node. You can change that behaviour and replace the node by passing `options.replace = true`.
#updateNodeData
(id: string, data: object | (node: Node) => object, options?: { replace: boolean }) => void
Function for updating node data. The passed data or function result gets merged into to the existing node data. You can change that behaviour and replace the node by passing `options.replace = true`.
#toObject
() => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
This function returns a JSON representation of your current Svelte Flow graph.
useNodesInitialized()useStore()