ReactFlowInstance

Source on GitHub

The ReactFlowInstance provides a collection of methods to query and manipulate the internal state of your flow. You can get an instance by using the useReactFlow hook or attaching a listener to the onInit event.

Fields

Nodes and edges

Name	Type	Default
`getNodes`	`() => Node[]` Returns nodes.
`setNodes`	`(payload: Node[] \| ((nodes: Node[]) => Node[])) => void` Set your nodes array to something else by either overwriting it with a new array or by passing in a function to update the existing array. If using a function, it is important to make sure a new array is returned instead of mutating the existing array. Calling this function will trigger the `onNodesChange` handler in a controlled flow.
`addNodes`	`(payload: Node \| Node[]) => void` Add one or many nodes to your existing nodes array. Calling this function will trigger the `onNodesChange` handler in a controlled flow.
`getNode`	`(id: string) => Node \| undefined` Returns a node by id.
`getInternalNode`	`(id: string) => InternalNode<Node> \| undefined` Returns an internal node by id.
`getEdges`	`() => Edge[]` Returns edges.
`setEdges`	`(payload: Edge[] \| ((edges: Edge[]) => Edge[])) => void` Set your edges array to something else by either overwriting it with a new array or by passing in a function to update the existing array. If using a function, it is important to make sure a new array is returned instead of mutating the existing array. Calling this function will trigger the `onEdgesChange` handler in a controlled flow.
`addEdges`	`(payload: Edge \| Edge[]) => void` Add one or many edges to your existing edges array. Calling this function will trigger the `onEdgesChange` handler in a controlled flow.
`getEdge`	`(id: string) => Edge \| undefined` Returns an edge by id.
`toObject`	`() => ReactFlowJsonObject<Node, Edge>` Returns the nodes, edges and the viewport as a JSON object.
`deleteElements`	`(params: DeleteElementsOptions) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[]; }>` Deletes nodes and edges.
`updateNode`	`(id: string, nodeUpdate: Partial<Node> \| ((node: Node) => Partial<Node>), options?: { replace: boolean; } \| undefined) => void` Updates a node.
`updateNodeData`	`(id: string, dataUpdate: Partial<Record<string, unknown>> \| ((node: Node) => Partial<Record<string, unknown>>), options?: { replace: boolean; } \| undefined) => void` Updates the data attribute of a node.
`updateEdge`	`(id: string, edgeUpdate: Partial<Edge> \| ((edge: Edge) => Partial<Edge>), options?: { replace: boolean; } \| undefined) => void` Updates an edge.
`updateEdgeData`	`(id: string, dataUpdate: Partial<Record<string, unknown> \| undefined> \| ((edge: Edge) => Partial<Record<string, unknown> \| undefined>), options?: { ...; } \| undefined) => void` Updates the data attribute of a edge.
`getNodesBounds`	`(nodes: (string \| Node \| InternalNode)[]) => Rect` Returns the bounds of the given nodes or node ids.
`getHandleConnections`	`({ type, id, nodeId, }: { type: HandleType; nodeId: string; id?: string \| null; }) => HandleConnection[]` Get all the connections of a handle belonging to a specific node. The type parameter be either `'source'` or `'target'`.
`getNodeConnections`	`({ type, handleId, nodeId, }: { type?: HandleType; nodeId: string; handleId?: string \| null; }) => NodeConnection[]` Gets all connections to a node. Can be filtered by handle type and id.

Intersections

Name	Type	Default
`getIntersectingNodes`	`(node: Node \| Rect \| { id: string; }, partially?: boolean \| undefined, nodes?: Node[] \| undefined) => Node[]` Find all the nodes currently intersecting with a given node or rectangle. The `partially` parameter can be set to `true` to include nodes that are only partially intersecting.
`isNodeIntersecting`	`(node: Node \| Rect \| { id: string; }, area: Rect, partially?: boolean \| undefined) => boolean` Determine if a given node or rectangle is intersecting with another rectangle. The `partially` parameter can be set to true return `true` even if the node is only partially intersecting.

Viewport

Name	Type	Default
`zoomIn`	`(options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' \| 'linear'; }) => Promise<boolean>` Zooms viewport in by 1.2.
`zoomOut`	`(options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' \| 'linear'; }) => Promise<boolean>` Zooms viewport out by 1 / 1.2.
`zoomTo`	`(zoomLevel: number, options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' \| 'linear'; }) => Promise<boolean>` Zoom the viewport to a given zoom level. Passing in a `duration` will animate the viewport to the new zoom level.
`getZoom`	`() => number` Get the current zoom level of the viewport.
`setViewport`	`(viewport: Viewport, options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' \| 'linear'; }) => Promise<boolean>` Sets the current viewport.
`getViewport`	`() => Viewport` Returns the current viewport.
`setCenter`	`(x: number, y: number, options?: ViewportHelperFunctionOptions & { zoom?: number; }) => Promise<boolean>` Center the viewport on a given position. Passing in a `duration` will animate the viewport to the new position.
`fitBounds`	`(bounds: Rect, options?: ViewportHelperFunctionOptions & { padding?: number; }) => Promise<boolean>` A low-level utility function to fit the viewport to a given rectangle. By passing in a `duration`, the viewport will animate from its current position to the new position. The `padding` option can be used to add space around the bounds.
`screenToFlowPosition`	`(clientPosition: XYPosition, options?: { snapToGrid: boolean; } \| undefined) => XYPosition` With this function you can translate a screen pixel position to a flow position. It is useful for implementing drag and drop from a sidebar for example.
`flowToScreenPosition`	`(flowPosition: XYPosition) => XYPosition` Translate a position inside the flow’s canvas to a screen pixel position.
`viewportInitialized`	`boolean` React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior. This property tells you when viewport is initialized.
`fitView`	`(fitViewOptions?: FitViewOptionsBase<NodeType>) => Promise<boolean>`

Last updated on July 11, 2025