VrumFlow

Build interactive node-and-edge workflows in Vrum’s visual language.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { VrumFlow } from '@vrum/ui';

<VrumFlow
  nodes={[{"id":"1","position":{"x":20,"y":60},"data":{"label":"Plan"}},{"id":"2","position":{"x":240,"y":60},"data":{"label":"Design"}},{"id":"3","position":{"x":460,"y":60},"data":{"label":"Build"}}]}
  edges={[{"id":"1-2","source":"1","target":"2"},{"id":"2-3","source":"2","target":"3"}]}
  showControls={true}
  showMiniMap={false}
  showBackground={true}
  fitView={true}
  height={320}
/>

VrumFlow props

Prop	Type	Default	Description
`nodes*`	`Node[]`	none	nodes configuration.
`edges*`	`Edge[]`	none	edges configuration.
`showControls`	`boolean`	`true`	show controls configuration.
`showMiniMap`	`boolean`	`false`	show mini map configuration.
`showBackground`	`boolean`	`true`	show background configuration.
`height`	`string \| number`	`340`	Height of the component in pixels.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onError`	`OnError`	none	Occasionally something may happen that causes React 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.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`onDelete`	`OnDelete<Node, Edge>`	none	This event handler gets called when a node or edge is deleted.
`width`	`number`	none	Sets a fixed width for the flow.
`defaultNodes`	`Node[]`	none	The initial nodes to render in an uncontrolled flow.
`defaultEdges`	`Edge[]`	none	The initial edges to render in an uncontrolled flow.
`defaultEdgeOptions`	`DefaultEdgeOptions`	none	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.
`onNodeClick`	`NodeMouseHandler<Node>`	none	This event handler is called when a user clicks on a node.
`onNodeDoubleClick`	`NodeMouseHandler<Node>`	none	This event handler is called when a user double-clicks on a node.
`onNodeMouseEnter`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user enters a node.
`onNodeMouseMove`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user moves over a node.
`onNodeMouseLeave`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user leaves a node.
`onNodeContextMenu`	`NodeMouseHandler<Node>`	none	This event handler is called when a user right-clicks on a node.
`onNodeDragStart`	`OnNodeDrag<Node>`	none	This event handler is called when a user starts to drag a node.
`onNodeDrag`	`OnNodeDrag<Node>`	none	This event handler is called when a user drags a node.
`onNodeDragStop`	`OnNodeDrag<Node>`	none	This event handler is called when a user stops dragging a node.
`onEdgeClick`	`((event: ReactMouseEvent, edge: Edge) => void)`	none	This event handler is called when a user clicks on an edge.
`onEdgeContextMenu`	`EdgeMouseHandler<Edge>`	none	This event handler is called when a user right-clicks on an edge.
`onEdgeMouseEnter`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user enters an edge.
`onEdgeMouseMove`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user moves over an edge.
`onEdgeMouseLeave`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user leaves an edge.
`onEdgeDoubleClick`	`EdgeMouseHandler<Edge>`	none	This event handler is called when a user double-clicks on an edge.
`onReconnect`	`OnReconnect<Edge>`	none	This handler is called when the source or target of a reconnectable edge is dragged from the current node. It will fire even if the edge's source or target do not end up changing. You can use the `reconnectEdge` utility to convert the connection to a new edge.
`onReconnectStart`	`((event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void)`	none	This event fires when the user begins dragging the source or target of an editable edge.
`onReconnectEnd`	`((event: MouseEvent \| TouchEvent, edge: Edge, handleType: HandleType, connectionState: FinalConnectionState) => void)`	none	This event fires when the user releases the source or target of an editable edge. It is called even if an edge update does not occur.
`onNodesChange`	`OnNodesChange<Node>`	none	Use this event handler to add interactivity to a controlled flow. It is called on node drag, select, and move.
`onEdgesChange`	`OnEdgesChange<Edge>`	none	Use this event handler to add interactivity to a controlled flow. It is called on edge select and remove.
`onNodesDelete`	`OnNodesDelete<Node>`	none	This event handler gets called when a node is deleted.
`onEdgesDelete`	`OnEdgesDelete<Edge>`	none	This event handler gets called when an edge is deleted.
`onSelectionDragStart`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user starts to drag a selection box.
`onSelectionDrag`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user drags a selection box.
`onSelectionDragStop`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user stops dragging a selection box.
`onSelectionStart`	`((event: ReactMouseEvent) => void)`	none	on selection start configuration.
`onSelectionEnd`	`((event: ReactMouseEvent) => void)`	none	on selection end configuration.
`onSelectionContextMenu`	`((event: ReactMouseEvent, nodes: Node[]) => void)`	none	This event handler is called when a user right-clicks on a node selection.
`onConnect`	`OnConnect`	none	When a connection line is completed and two nodes are connected by the user, this event fires with the new connection. You can use the `addEdge` utility to convert the connection to a complete edge.
`onConnectStart`	`OnConnectStart`	none	This event handler gets called when a user starts to drag a connection line.
`onConnectEnd`	`OnConnectEnd`	none	This callback will fire regardless of whether a valid connection could be made or not. You can use the second `connectionState` parameter to have different behavior when a connection was unsuccessful.
`onClickConnectStart`	`OnConnectStart`	none	on click connect start configuration.
`onClickConnectEnd`	`OnConnectEnd`	none	on click connect end configuration.
`onInit`	`OnInit<Node, Edge>`	none	The `onInit` callback is called when the viewport is initialized. At this point you can use the instance to call methods like `fitView` or `zoomTo`.
`onMove`	`OnMove`	none	This event handler is called while the user is either panning or zooming the viewport.
`onMoveStart`	`OnMove`	none	This event handler is called when the user begins to pan or zoom the viewport.
`onMoveEnd`	`OnMove`	none	This event handler is called when panning or zooming viewport movement stops. If the movement is not user-initiated, the event parameter will be `null`.
`onSelectionChange`	`OnSelectionChangeFunc<Node, Edge>`	none	This event handler gets called when a user changes group of selected elements in the flow.
`onPaneScroll`	`((event?: WheelEvent) => void)`	none	This event handler gets called when user scroll inside the pane.
`onPaneClick`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when user clicks inside the pane.
`onPaneContextMenu`	`((event: ReactMouseEvent \| MouseEvent) => void)`	none	This event handler gets called when user right clicks inside the pane.
`onPaneMouseEnter`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse enters the pane.
`onPaneMouseMove`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse moves over the pane.
`onPaneMouseLeave`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse leaves the pane.
`paneClickDistance`	`number`	none	Distance that the mouse can move between mousedown/up that will trigger a click.
`nodeClickDistance`	`number`	none	Distance that the mouse can move between mousedown/up that will trigger a click.
`onBeforeDelete`	`OnBeforeDelete<Node, Edge>`	none	This handler is called before nodes or edges are deleted, allowing the deletion to be aborted by returning `false` or modified by returning updated nodes and edges.
`nodeTypes`	`NodeTypes`	none	Custom node types to be available in a flow. React Flow matches a node's type to a component in the `nodeTypes` object.
`edgeTypes`	`EdgeTypes`	none	Custom edge types to be available in a flow. React Flow matches an edge's type to a component in the `edgeTypes` object.
`connectionLineType`	`ConnectionLineType`	none	The type of edge path to use for connection lines. Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
`connectionLineStyle`	`CSSProperties`	none	Styles to be applied to the connection line.
`connectionLineComponent`	`ConnectionLineComponent<Node>`	none	React Component to be used as a connection line.
`connectionLineContainerStyle`	`CSSProperties`	none	Styles to be applied to the container of the connection line.
`connectionMode`	`ConnectionMode`	none	A loose connection mode will allow you to connect handles with differing types, including source-to-source connections. However, it does not support target-to-target connections. Strict mode allows only connections between source handles and target handles.
`deleteKeyCode`	`KeyCode \| null`	none	If set, pressing the key or chord will delete any selected nodes and edges. Passing an array represents multiple keys that can be pressed. For example, `["Delete", "Backspace"]` will delete selected elements when either key is pressed.
`selectionKeyCode`	`KeyCode \| null`	none	If set, holding this key will let you click and drag to draw a selection box around multiple nodes and edges. Passing an array represents multiple keys that can be pressed. For example, `["Shift", "Meta"]` will allow you to draw a selection box when either key is pressed.
`selectionOnDrag`	`boolean`	none	Select multiple elements with a selection box, without pressing down `selectionKey`.
`selectionMode`	`SelectionMode`	none	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.
`panActivationKeyCode`	`KeyCode \| null`	none	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.
`multiSelectionKeyCode`	`KeyCode \| null`	none	Pressing down this key you can select multiple elements by clicking.
`zoomActivationKeyCode`	`KeyCode \| null`	none	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.
`snapToGrid`	`boolean`	none	When enabled, nodes will snap to the grid when dragged.
`snapGrid`	`SnapGrid`	none	If `snapToGrid` is enabled, this prop configures the grid that nodes will snap to.
`onlyRenderVisibleElements`	`boolean`	none	You can enable this optimisation to instruct React 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.
`nodesDraggable`	`boolean`	none	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.
`autoPanOnNodeFocus`	`boolean`	none	When `true`, the viewport will pan when a node is focused.
`nodesConnectable`	`boolean`	none	Controls whether all nodes should be connectable or not. Individual nodes can override this setting by setting their `connectable` prop.
`nodesFocusable`	`boolean`	none	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.
`nodeOrigin`	`NodeOrigin`	none	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.
`edgesFocusable`	`boolean`	none	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.
`edgesReconnectable`	`boolean`	none	Whether edges can be updated once they are created. When both this prop is `true` and an `onReconnect` handler is provided, the user can drag an existing edge to a new source or target. Individual edges can override this value with their reconnectable property.
`elementsSelectable`	`boolean`	none	When `true`, elements (nodes and edges) can be selected by clicking on them. This option can be overridden by individual elements by setting their `selectable` prop.
`selectNodesOnDrag`	`boolean`	none	If `true`, nodes get selected on drag.
`panOnDrag`	`boolean \| number[]`	none	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. Mouse button arrays do not disable touch panning; set this prop to `false` to disable all drag panning.
`minZoom`	`number`	none	Minimum zoom level.
`maxZoom`	`number`	none	Maximum zoom level.
`viewport`	`Viewport`	none	When you pass a `viewport` prop, it's controlled, and you also need to pass `onViewportChange` to handle internal changes.
`defaultViewport`	`Viewport`	none	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.
`onViewportChange`	`((viewport: Viewport) => void)`	none	Used when working with a controlled viewport for updating the user viewport state.
`translateExtent`	`CoordinateExtent`	none	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`	none	Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
`nodeExtent`	`CoordinateExtent`	none	By default, nodes can be placed on an infinite flow. 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.
`defaultMarkerColor`	`string \| null`	none	Color of edge markers. You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
`zoomOnScroll`	`boolean`	none	Controls if the viewport should zoom by scrolling inside the container.
`zoomOnPinch`	`boolean`	none	Controls if the viewport should zoom by pinching on a touch screen.
`panOnScroll`	`boolean`	none	Controls if the viewport should pan by scrolling inside the container. Can be limited to a specific direction with `panOnScrollMode`.
`panOnScrollSpeed`	`number`	none	Controls how fast viewport should be panned on scroll. Use together with `panOnScroll` prop.
`panOnScrollMode`	`PanOnScrollMode`	none	This prop is used to limit the direction of panning when `panOnScroll` is enabled. The `"free"` option allows panning in any direction.
`zoomOnDoubleClick`	`boolean`	none	Controls if the viewport should zoom by double-clicking somewhere on the flow.
`reconnectRadius`	`number`	none	The radius around an edge connection that can trigger an edge reconnection.
`noDragClassName`	`string`	none	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.
`noWheelClassName`	`string`	none	Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport. Adding the `"nowheel"` class to an element in the canvas will prevent this behavior and this prop allows you to change the name of that class.
`noPanClassName`	`string`	none	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.
`fitView`	`boolean`	none	fit view configuration.
`fitViewOptions`	`FitViewOptions`	none	When you typically call `fitView` on a `ReactFlowInstance`, you can provide an object of options to customize its behavior. This prop lets you do the same for the initial `fitView` call.
`connectOnClick`	`boolean`	none	The `connectOnClick` option lets you click or tap on a source handle to start a connection and then click on a target handle to complete the connection. If you set this option to `false`, users will need to drag the connection line to the target handle to create a connection.
`attributionPosition`	`PanelPosition`	none	By default, React 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.
`proOptions`	`ProOptions`	none	By default, we render a small attribution in the corner of your flows that links back to the project. Please only remove the attribution if you have a React Flow subscription. More information in the {@link https://reactflow.dev/remove-attribution removing attribution guide}.
`elevateNodesOnSelect`	`boolean`	none	Enabling this option will raise the z-index of nodes when they are selected.
`elevateEdgesOnSelect`	`boolean`	none	Enabling this option will raise the z-index of edges when they are selected.
`disableKeyboardA11y`	`boolean`	none	You can use this prop to disable keyboard accessibility features such as selecting nodes or moving selected nodes with the arrow keys.
`autoPanOnNodeDrag`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while dragging a node.
`autoPanOnConnect`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while creating a connection.
`autoPanOnSelection`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while creating a selection box.
`autoPanSpeed`	`number`	none	The speed at which the viewport pans while dragging a node or a selection box.
`connectionRadius`	`number`	none	The radius around a handle where you drop a connection line to create a new edge.
`isValidConnection`	`IsValidConnection<Edge>`	none	This callback can be used to validate a new connection If you return `false`, the edge will not be added to your flow. If you have custom connection logic its preferred to use this callback over the `isValidConnection` prop on the handle component for performance reasons.
`nodeDragThreshold`	`number`	none	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. 1 is the default value, so that clicks don't trigger drag events.
`connectionDragThreshold`	`number`	none	The threshold in pixels that the mouse must move before a connection line starts to drag. This is useful to prevent accidental connections when clicking on a handle.
`colorMode`	`ColorMode`	none	Controls color scheme used for styling the flow.
`debug`	`boolean`	none	If set `true`, some debug information will be logged to the console like which events are fired.
`ariaLabelConfig`	`Partial<{ 'node.a11yDescription.default': string; 'node.a11yDescription.keyboardDisabled': string; 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number; }) => string; 'edge.a11yDescription.default': string; 'controls.ariaLabel': string; 'controls.zoomIn.ariaLabel': string; 'controls.zoomOut.ariaLab…`	none	Configuration for customizable labels, descriptions, and UI text. Provided keys will override the corresponding defaults. Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings.
`zIndexMode`	`ZIndexMode`	none	Used to define how z-indexing is calculated for nodes and edges. 'auto' is for selections and sub flows, 'basic' for selections only, and 'manual' for no auto z-indexing.

VrumFlow

Build interactive node-and-edge workflows in Vrum’s visual language.

Interactive playground

LIVE PREVIEW

Plan

Design

Build

React Flow

Loading preview…

Generated code

import { VrumFlow } from '@vrum/ui';

<VrumFlow
  nodes={[{"id":"1","position":{"x":20,"y":60},"data":{"label":"Plan"}},{"id":"2","position":{"x":240,"y":60},"data":{"label":"Design"}},{"id":"3","position":{"x":460,"y":60},"data":{"label":"Build"}}]}
  edges={[{"id":"1-2","source":"1","target":"2"},{"id":"2-3","source":"2","target":"3"}]}
  showControls={true}
  showMiniMap={false}
  showBackground={true}
  fitView={true}
  height={320}
/>

VrumFlow props

Prop	Type	Default	Description
`nodes*`	`Node[]`	none	nodes configuration.
`edges*`	`Edge[]`	none	edges configuration.
`showControls`	`boolean`	`true`	show controls configuration.
`showMiniMap`	`boolean`	`false`	show mini map configuration.
`showBackground`	`boolean`	`true`	show background configuration.
`height`	`string \| number`	`340`	Height of the component in pixels.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onError`	`OnError`	none	Occasionally something may happen that causes React 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.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`onDelete`	`OnDelete<Node, Edge>`	none	This event handler gets called when a node or edge is deleted.
`width`	`number`	none	Sets a fixed width for the flow.
`defaultNodes`	`Node[]`	none	The initial nodes to render in an uncontrolled flow.
`defaultEdges`	`Edge[]`	none	The initial edges to render in an uncontrolled flow.
`defaultEdgeOptions`	`DefaultEdgeOptions`	none	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.
`onNodeClick`	`NodeMouseHandler<Node>`	none	This event handler is called when a user clicks on a node.
`onNodeDoubleClick`	`NodeMouseHandler<Node>`	none	This event handler is called when a user double-clicks on a node.
`onNodeMouseEnter`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user enters a node.
`onNodeMouseMove`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user moves over a node.
`onNodeMouseLeave`	`NodeMouseHandler<Node>`	none	This event handler is called when mouse of a user leaves a node.
`onNodeContextMenu`	`NodeMouseHandler<Node>`	none	This event handler is called when a user right-clicks on a node.
`onNodeDragStart`	`OnNodeDrag<Node>`	none	This event handler is called when a user starts to drag a node.
`onNodeDrag`	`OnNodeDrag<Node>`	none	This event handler is called when a user drags a node.
`onNodeDragStop`	`OnNodeDrag<Node>`	none	This event handler is called when a user stops dragging a node.
`onEdgeClick`	`((event: ReactMouseEvent, edge: Edge) => void)`	none	This event handler is called when a user clicks on an edge.
`onEdgeContextMenu`	`EdgeMouseHandler<Edge>`	none	This event handler is called when a user right-clicks on an edge.
`onEdgeMouseEnter`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user enters an edge.
`onEdgeMouseMove`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user moves over an edge.
`onEdgeMouseLeave`	`EdgeMouseHandler<Edge>`	none	This event handler is called when mouse of a user leaves an edge.
`onEdgeDoubleClick`	`EdgeMouseHandler<Edge>`	none	This event handler is called when a user double-clicks on an edge.
`onReconnect`	`OnReconnect<Edge>`	none	This handler is called when the source or target of a reconnectable edge is dragged from the current node. It will fire even if the edge's source or target do not end up changing. You can use the `reconnectEdge` utility to convert the connection to a new edge.
`onReconnectStart`	`((event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void)`	none	This event fires when the user begins dragging the source or target of an editable edge.
`onReconnectEnd`	`((event: MouseEvent \| TouchEvent, edge: Edge, handleType: HandleType, connectionState: FinalConnectionState) => void)`	none	This event fires when the user releases the source or target of an editable edge. It is called even if an edge update does not occur.
`onNodesChange`	`OnNodesChange<Node>`	none	Use this event handler to add interactivity to a controlled flow. It is called on node drag, select, and move.
`onEdgesChange`	`OnEdgesChange<Edge>`	none	Use this event handler to add interactivity to a controlled flow. It is called on edge select and remove.
`onNodesDelete`	`OnNodesDelete<Node>`	none	This event handler gets called when a node is deleted.
`onEdgesDelete`	`OnEdgesDelete<Edge>`	none	This event handler gets called when an edge is deleted.
`onSelectionDragStart`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user starts to drag a selection box.
`onSelectionDrag`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user drags a selection box.
`onSelectionDragStop`	`SelectionDragHandler<Node>`	none	This event handler gets called when a user stops dragging a selection box.
`onSelectionStart`	`((event: ReactMouseEvent) => void)`	none	on selection start configuration.
`onSelectionEnd`	`((event: ReactMouseEvent) => void)`	none	on selection end configuration.
`onSelectionContextMenu`	`((event: ReactMouseEvent, nodes: Node[]) => void)`	none	This event handler is called when a user right-clicks on a node selection.
`onConnect`	`OnConnect`	none	When a connection line is completed and two nodes are connected by the user, this event fires with the new connection. You can use the `addEdge` utility to convert the connection to a complete edge.
`onConnectStart`	`OnConnectStart`	none	This event handler gets called when a user starts to drag a connection line.
`onConnectEnd`	`OnConnectEnd`	none	This callback will fire regardless of whether a valid connection could be made or not. You can use the second `connectionState` parameter to have different behavior when a connection was unsuccessful.
`onClickConnectStart`	`OnConnectStart`	none	on click connect start configuration.
`onClickConnectEnd`	`OnConnectEnd`	none	on click connect end configuration.
`onInit`	`OnInit<Node, Edge>`	none	The `onInit` callback is called when the viewport is initialized. At this point you can use the instance to call methods like `fitView` or `zoomTo`.
`onMove`	`OnMove`	none	This event handler is called while the user is either panning or zooming the viewport.
`onMoveStart`	`OnMove`	none	This event handler is called when the user begins to pan or zoom the viewport.
`onMoveEnd`	`OnMove`	none	This event handler is called when panning or zooming viewport movement stops. If the movement is not user-initiated, the event parameter will be `null`.
`onSelectionChange`	`OnSelectionChangeFunc<Node, Edge>`	none	This event handler gets called when a user changes group of selected elements in the flow.
`onPaneScroll`	`((event?: WheelEvent) => void)`	none	This event handler gets called when user scroll inside the pane.
`onPaneClick`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when user clicks inside the pane.
`onPaneContextMenu`	`((event: ReactMouseEvent \| MouseEvent) => void)`	none	This event handler gets called when user right clicks inside the pane.
`onPaneMouseEnter`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse enters the pane.
`onPaneMouseMove`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse moves over the pane.
`onPaneMouseLeave`	`((event: ReactMouseEvent) => void)`	none	This event handler gets called when mouse leaves the pane.
`paneClickDistance`	`number`	none	Distance that the mouse can move between mousedown/up that will trigger a click.
`nodeClickDistance`	`number`	none	Distance that the mouse can move between mousedown/up that will trigger a click.
`onBeforeDelete`	`OnBeforeDelete<Node, Edge>`	none	This handler is called before nodes or edges are deleted, allowing the deletion to be aborted by returning `false` or modified by returning updated nodes and edges.
`nodeTypes`	`NodeTypes`	none	Custom node types to be available in a flow. React Flow matches a node's type to a component in the `nodeTypes` object.
`edgeTypes`	`EdgeTypes`	none	Custom edge types to be available in a flow. React Flow matches an edge's type to a component in the `edgeTypes` object.
`connectionLineType`	`ConnectionLineType`	none	The type of edge path to use for connection lines. Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
`connectionLineStyle`	`CSSProperties`	none	Styles to be applied to the connection line.
`connectionLineComponent`	`ConnectionLineComponent<Node>`	none	React Component to be used as a connection line.
`connectionLineContainerStyle`	`CSSProperties`	none	Styles to be applied to the container of the connection line.
`connectionMode`	`ConnectionMode`	none	A loose connection mode will allow you to connect handles with differing types, including source-to-source connections. However, it does not support target-to-target connections. Strict mode allows only connections between source handles and target handles.
`deleteKeyCode`	`KeyCode \| null`	none	If set, pressing the key or chord will delete any selected nodes and edges. Passing an array represents multiple keys that can be pressed. For example, `["Delete", "Backspace"]` will delete selected elements when either key is pressed.
`selectionKeyCode`	`KeyCode \| null`	none	If set, holding this key will let you click and drag to draw a selection box around multiple nodes and edges. Passing an array represents multiple keys that can be pressed. For example, `["Shift", "Meta"]` will allow you to draw a selection box when either key is pressed.
`selectionOnDrag`	`boolean`	none	Select multiple elements with a selection box, without pressing down `selectionKey`.
`selectionMode`	`SelectionMode`	none	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.
`panActivationKeyCode`	`KeyCode \| null`	none	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.
`multiSelectionKeyCode`	`KeyCode \| null`	none	Pressing down this key you can select multiple elements by clicking.
`zoomActivationKeyCode`	`KeyCode \| null`	none	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.
`snapToGrid`	`boolean`	none	When enabled, nodes will snap to the grid when dragged.
`snapGrid`	`SnapGrid`	none	If `snapToGrid` is enabled, this prop configures the grid that nodes will snap to.
`onlyRenderVisibleElements`	`boolean`	none	You can enable this optimisation to instruct React 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.
`nodesDraggable`	`boolean`	none	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.
`autoPanOnNodeFocus`	`boolean`	none	When `true`, the viewport will pan when a node is focused.
`nodesConnectable`	`boolean`	none	Controls whether all nodes should be connectable or not. Individual nodes can override this setting by setting their `connectable` prop.
`nodesFocusable`	`boolean`	none	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.
`nodeOrigin`	`NodeOrigin`	none	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.
`edgesFocusable`	`boolean`	none	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.
`edgesReconnectable`	`boolean`	none	Whether edges can be updated once they are created. When both this prop is `true` and an `onReconnect` handler is provided, the user can drag an existing edge to a new source or target. Individual edges can override this value with their reconnectable property.
`elementsSelectable`	`boolean`	none	When `true`, elements (nodes and edges) can be selected by clicking on them. This option can be overridden by individual elements by setting their `selectable` prop.
`selectNodesOnDrag`	`boolean`	none	If `true`, nodes get selected on drag.
`panOnDrag`	`boolean \| number[]`	none	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. Mouse button arrays do not disable touch panning; set this prop to `false` to disable all drag panning.
`minZoom`	`number`	none	Minimum zoom level.
`maxZoom`	`number`	none	Maximum zoom level.
`viewport`	`Viewport`	none	When you pass a `viewport` prop, it's controlled, and you also need to pass `onViewportChange` to handle internal changes.
`defaultViewport`	`Viewport`	none	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.
`onViewportChange`	`((viewport: Viewport) => void)`	none	Used when working with a controlled viewport for updating the user viewport state.
`translateExtent`	`CoordinateExtent`	none	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`	none	Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
`nodeExtent`	`CoordinateExtent`	none	By default, nodes can be placed on an infinite flow. 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.
`defaultMarkerColor`	`string \| null`	none	Color of edge markers. You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
`zoomOnScroll`	`boolean`	none	Controls if the viewport should zoom by scrolling inside the container.
`zoomOnPinch`	`boolean`	none	Controls if the viewport should zoom by pinching on a touch screen.
`panOnScroll`	`boolean`	none	Controls if the viewport should pan by scrolling inside the container. Can be limited to a specific direction with `panOnScrollMode`.
`panOnScrollSpeed`	`number`	none	Controls how fast viewport should be panned on scroll. Use together with `panOnScroll` prop.
`panOnScrollMode`	`PanOnScrollMode`	none	This prop is used to limit the direction of panning when `panOnScroll` is enabled. The `"free"` option allows panning in any direction.
`zoomOnDoubleClick`	`boolean`	none	Controls if the viewport should zoom by double-clicking somewhere on the flow.
`reconnectRadius`	`number`	none	The radius around an edge connection that can trigger an edge reconnection.
`noDragClassName`	`string`	none	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.
`noWheelClassName`	`string`	none	Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport. Adding the `"nowheel"` class to an element in the canvas will prevent this behavior and this prop allows you to change the name of that class.
`noPanClassName`	`string`	none	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.
`fitView`	`boolean`	none	fit view configuration.
`fitViewOptions`	`FitViewOptions`	none	When you typically call `fitView` on a `ReactFlowInstance`, you can provide an object of options to customize its behavior. This prop lets you do the same for the initial `fitView` call.
`connectOnClick`	`boolean`	none	The `connectOnClick` option lets you click or tap on a source handle to start a connection and then click on a target handle to complete the connection. If you set this option to `false`, users will need to drag the connection line to the target handle to create a connection.
`attributionPosition`	`PanelPosition`	none	By default, React 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.
`proOptions`	`ProOptions`	none	By default, we render a small attribution in the corner of your flows that links back to the project. Please only remove the attribution if you have a React Flow subscription. More information in the {@link https://reactflow.dev/remove-attribution removing attribution guide}.
`elevateNodesOnSelect`	`boolean`	none	Enabling this option will raise the z-index of nodes when they are selected.
`elevateEdgesOnSelect`	`boolean`	none	Enabling this option will raise the z-index of edges when they are selected.
`disableKeyboardA11y`	`boolean`	none	You can use this prop to disable keyboard accessibility features such as selecting nodes or moving selected nodes with the arrow keys.
`autoPanOnNodeDrag`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while dragging a node.
`autoPanOnConnect`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while creating a connection.
`autoPanOnSelection`	`boolean`	none	When `true`, the viewport will pan automatically when the cursor moves to the edge of the viewport while creating a selection box.
`autoPanSpeed`	`number`	none	The speed at which the viewport pans while dragging a node or a selection box.
`connectionRadius`	`number`	none	The radius around a handle where you drop a connection line to create a new edge.
`isValidConnection`	`IsValidConnection<Edge>`	none	This callback can be used to validate a new connection If you return `false`, the edge will not be added to your flow. If you have custom connection logic its preferred to use this callback over the `isValidConnection` prop on the handle component for performance reasons.
`nodeDragThreshold`	`number`	none	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. 1 is the default value, so that clicks don't trigger drag events.
`connectionDragThreshold`	`number`	none	The threshold in pixels that the mouse must move before a connection line starts to drag. This is useful to prevent accidental connections when clicking on a handle.
`colorMode`	`ColorMode`	none	Controls color scheme used for styling the flow.
`debug`	`boolean`	none	If set `true`, some debug information will be logged to the console like which events are fired.
`ariaLabelConfig`	`Partial<{ 'node.a11yDescription.default': string; 'node.a11yDescription.keyboardDisabled': string; 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number; }) => string; 'edge.a11yDescription.default': string; 'controls.ariaLabel': string; 'controls.zoomIn.ariaLabel': string; 'controls.zoomOut.ariaLab…`	none	Configuration for customizable labels, descriptions, and UI text. Provided keys will override the corresponding defaults. Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings.
`zIndexMode`	`ZIndexMode`	none	Used to define how z-indexing is calculated for nodes and edges. 'auto' is for selections and sub flows, 'basic' for selections only, and 'manual' for no auto z-indexing.

VrumFlow

Interactive playground

Props

VrumFlow props

VrumFlow

Interactive playground

Props

VrumFlow props