René's URL Explorer Experiment


Title: Types - React Flow

Open Graph Title: Types - React Flow

X Title: Types - React Flow

Description: React Flow - Customizable library for rendering workflows, diagrams and node-based UIs.

Open Graph Description: React Flow - Customizable library for rendering workflows, diagrams and node-based UIs.

X Description: React Flow - Customizable library for rendering workflows, diagrams and node-based UIs.

Keywords:

Mail addresses
info@xyflow.com

Opengraph URL: https://reactflow.dev/api-reference/types

X: https://x.com/xyflowdev

Generator: Next.js

direct link

Domain: reactflow.dev

theme-colorrgb(17,17,17)
application-nameReact Flow
docsearch:sitereact
mobile-web-app-capableyes
apple-mobile-web-app-titleReact Flow
apple-mobile-web-app-status-bar-styledefault
og:site_nameReact Flow
og:localeen_US
og:image:typeimage/jpeg
og:image:width1200
og:image:height640
og:imagehttps://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a
og:typewebsite
twitter:cardsummary_large_image
twitter:creator@xyflowdev
twitter:image:typeimage/jpeg
twitter:image:width1200
twitter:image:height640
twitter:imagehttps://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a

Links:

Skip to Contenthttps://reactflow.dev/api-reference/types#nextra-skip-nav
🚨 New Example: Handling Node Collisions!https://reactflow.dev/examples/layout/node-collisions
React Flowhttps://reactflow.dev/
Learnhttps://reactflow.dev/learn
Referencehttps://reactflow.dev/api-reference
Exampleshttps://reactflow.dev/examples
UIhttps://reactflow.dev/ui
Showcasehttps://reactflow.dev/showcase
GitHubhttps://github.com/xyflow/xyflow
Discordhttps://discord.gg/RVmnytFmGW
React FlowProhttps://reactflow.dev/pro
Quick Starthttps://reactflow.dev/learn
Overviewhttps://reactflow.dev/learn/concepts/terms-and-definitions
Building a Flowhttps://reactflow.dev/learn/concepts/building-a-flow
Adding Interactivityhttps://reactflow.dev/learn/concepts/adding-interactivity
The Viewporthttps://reactflow.dev/learn/concepts/the-viewport
Built-In Componentshttps://reactflow.dev/learn/concepts/built-in-components
Nodeshttps://reactflow.dev/learn/customization/custom-nodes
Handleshttps://reactflow.dev/learn/customization/handles
Edgeshttps://reactflow.dev/learn/customization/custom-edges
Edge Labelshttps://reactflow.dev/learn/customization/edge-labels
Utility Classeshttps://reactflow.dev/learn/customization/utility-classes
Theminghttps://reactflow.dev/learn/customization/theming
Overviewhttps://reactflow.dev/learn/layouting/layouting
Sub Flowshttps://reactflow.dev/learn/layouting/sub-flows
Hooks and Providershttps://reactflow.dev/learn/advanced-use/hooks-providers
Accessibilityhttps://reactflow.dev/learn/advanced-use/accessibility
Testinghttps://reactflow.dev/learn/advanced-use/testing
TypeScripthttps://reactflow.dev/learn/advanced-use/typescript
Uncontrolled Flowhttps://reactflow.dev/learn/advanced-use/uncontrolled-flow
Performancehttps://reactflow.dev/learn/advanced-use/performance
State Managementhttps://reactflow.dev/learn/advanced-use/state-management
Computing Flowshttps://reactflow.dev/learn/advanced-use/computing-flows
Server Side Renderinghttps://reactflow.dev/learn/advanced-use/ssr-ssg-configuration
Devtoolshttps://reactflow.dev/learn/advanced-use/devtools-and-debugging
Whiteboard Featureshttps://reactflow.dev/learn/advanced-use/whiteboard
Slideshow Apphttps://reactflow.dev/learn/tutorials/slide-shows-with-react-flow
Web Audio APIhttps://reactflow.dev/learn/tutorials/react-flow-and-the-web-audio-api
Mind Map Apphttps://reactflow.dev/learn/tutorials/mind-map-app-with-react-flow
React Flow UIhttps://reactflow.dev/learn/tutorials/getting-started-with-react-flow-components
Common Errorshttps://reactflow.dev/learn/troubleshooting/common-errors
Remove Attributionhttps://reactflow.dev/learn/troubleshooting/remove-attribution
Migrate to v12https://reactflow.dev/learn/troubleshooting/migrate-to-v12
Migrate to v11https://reactflow.dev/learn/troubleshooting/migrate-to-v11
Migrate to v10https://reactflow.dev/learn/troubleshooting/migrate-to-v10
API Referencehttps://reactflow.dev/api-reference
API Referencehttps://reactflow.dev/api-reference
https://reactflow.dev/api-reference/react-flow
https://reactflow.dev/api-reference/react-flow-provider
Componentshttps://reactflow.dev/api-reference/components
https://reactflow.dev/api-reference/components/background
https://reactflow.dev/api-reference/components/base-edge
https://reactflow.dev/api-reference/components/control-button
https://reactflow.dev/api-reference/components/controls
https://reactflow.dev/api-reference/components/edge-label-renderer
https://reactflow.dev/api-reference/components/edge-text
https://reactflow.dev/api-reference/components/edge-toolbar
https://reactflow.dev/api-reference/components/handle
https://reactflow.dev/api-reference/components/minimap
https://reactflow.dev/api-reference/components/node-resize-control
https://reactflow.dev/api-reference/components/node-resizer
https://reactflow.dev/api-reference/components/node-toolbar
https://reactflow.dev/api-reference/components/panel
https://reactflow.dev/api-reference/components/viewport-portal
Hookshttps://reactflow.dev/api-reference/hooks
useConnection()https://reactflow.dev/api-reference/hooks/use-connection
useEdges()https://reactflow.dev/api-reference/hooks/use-edges
useEdgesState()https://reactflow.dev/api-reference/hooks/use-edges-state
useHandleConnections()https://reactflow.dev/api-reference/hooks/use-handle-connections
useInternalNode()https://reactflow.dev/api-reference/hooks/use-internal-node
useKeyPress()https://reactflow.dev/api-reference/hooks/use-key-press
useNodeConnections()https://reactflow.dev/api-reference/hooks/use-node-connections
useNodeId()https://reactflow.dev/api-reference/hooks/use-node-id
useNodes()https://reactflow.dev/api-reference/hooks/use-nodes
useNodesData()https://reactflow.dev/api-reference/hooks/use-nodes-data
useNodesInitialized()https://reactflow.dev/api-reference/hooks/use-nodes-initialized
useNodesState()https://reactflow.dev/api-reference/hooks/use-nodes-state
useOnSelectionChange()https://reactflow.dev/api-reference/hooks/use-on-selection-change
useOnViewportChange()https://reactflow.dev/api-reference/hooks/use-on-viewport-change
useReactFlow()https://reactflow.dev/api-reference/hooks/use-react-flow
useStore()https://reactflow.dev/api-reference/hooks/use-store
useStoreApi()https://reactflow.dev/api-reference/hooks/use-store-api
useUpdateNodeInternals()https://reactflow.dev/api-reference/hooks/use-update-node-internals
useViewport()https://reactflow.dev/api-reference/hooks/use-viewport
Typeshttps://reactflow.dev/api-reference/types
Alignhttps://reactflow.dev/api-reference/types/align
AriaLabelConfighttps://reactflow.dev/api-reference/types/aria-label-config
BackgroundVarianthttps://reactflow.dev/api-reference/types/background-variant
ColorModehttps://reactflow.dev/api-reference/types/color-mode
Connectionhttps://reactflow.dev/api-reference/types/connection
ConnectionLineComponenthttps://reactflow.dev/api-reference/types/connection-line-component
ConnectionLineComponentPropshttps://reactflow.dev/api-reference/types/connection-line-component-props
ConnectionLineTypehttps://reactflow.dev/api-reference/types/connection-line-type
ConnectionModehttps://reactflow.dev/api-reference/types/connection-mode
ConnectionStatehttps://reactflow.dev/api-reference/types/connection-state
CoordinateExtenthttps://reactflow.dev/api-reference/types/coordinate-extent
DefaultEdgeOptionshttps://reactflow.dev/api-reference/types/default-edge-options
DeleteElementshttps://reactflow.dev/api-reference/types/delete-elements
Edgehttps://reactflow.dev/api-reference/types/edge
EdgeChangehttps://reactflow.dev/api-reference/types/edge-change
EdgeMarkerhttps://reactflow.dev/api-reference/types/edge-marker
EdgeMouseHandlerhttps://reactflow.dev/api-reference/types/edge-mouse-handler
EdgePropshttps://reactflow.dev/api-reference/types/edge-props
EdgeTypeshttps://reactflow.dev/api-reference/types/edge-types
FitViewOptionshttps://reactflow.dev/api-reference/types/fit-view-options
Handlehttps://reactflow.dev/api-reference/types/handle
HandleConnectionhttps://reactflow.dev/api-reference/types/handle-connection
InternalNodehttps://reactflow.dev/api-reference/types/internal-node
IsValidConnectionhttps://reactflow.dev/api-reference/types/is-valid-connection
KeyCodehttps://reactflow.dev/api-reference/types/key-code
MarkerTypehttps://reactflow.dev/api-reference/types/marker-type
MiniMapNodePropshttps://reactflow.dev/api-reference/types/mini-map-node-props
Nodehttps://reactflow.dev/api-reference/types/node
NodeChangehttps://reactflow.dev/api-reference/types/node-change
NodeConnectionhttps://reactflow.dev/api-reference/types/node-connection
NodeHandlehttps://reactflow.dev/api-reference/types/node-handle
NodeMouseHandlerhttps://reactflow.dev/api-reference/types/node-mouse-handler
NodeOriginhttps://reactflow.dev/api-reference/types/node-origin
NodePropshttps://reactflow.dev/api-reference/types/node-props
NodeTypeshttps://reactflow.dev/api-reference/types/node-types
OnBeforeDeletehttps://reactflow.dev/api-reference/types/on-before-delete
OnConnecthttps://reactflow.dev/api-reference/types/on-connect
OnConnectEndhttps://reactflow.dev/api-reference/types/on-connect-end
OnConnectStarthttps://reactflow.dev/api-reference/types/on-connect-start
OnDeletehttps://reactflow.dev/api-reference/types/on-delete
OnEdgesChangehttps://reactflow.dev/api-reference/types/on-edges-change
OnEdgesDeletehttps://reactflow.dev/api-reference/types/on-edges-delete
OnErrorhttps://reactflow.dev/api-reference/types/on-error
OnInithttps://reactflow.dev/api-reference/types/on-init
OnMovehttps://reactflow.dev/api-reference/types/on-move
OnNodeDraghttps://reactflow.dev/api-reference/types/on-node-drag
OnNodesChangehttps://reactflow.dev/api-reference/types/on-nodes-change
OnNodesDeletehttps://reactflow.dev/api-reference/types/on-nodes-delete
OnReconnecthttps://reactflow.dev/api-reference/types/on-reconnect
OnSelectionChangeFunchttps://reactflow.dev/api-reference/types/on-selection-change-func
PanOnScrollModehttps://reactflow.dev/api-reference/types/pan-on-scroll-mode
PanelPositionhttps://reactflow.dev/api-reference/types/panel-position
Positionhttps://reactflow.dev/api-reference/types/position
ProOptionshttps://reactflow.dev/api-reference/types/pro-options
ReactFlowInstancehttps://reactflow.dev/api-reference/types/react-flow-instance
ReactFlowJsonObjecthttps://reactflow.dev/api-reference/types/react-flow-json-object
Recthttps://reactflow.dev/api-reference/types/rect
ResizeParamshttps://reactflow.dev/api-reference/types/resize-params
SelectionDragHandlerhttps://reactflow.dev/api-reference/types/selection-drag-handler
SelectionModehttps://reactflow.dev/api-reference/types/selection-mode
SnapGridhttps://reactflow.dev/api-reference/types/snap-grid
Viewporthttps://reactflow.dev/api-reference/types/viewport
XYPositionhttps://reactflow.dev/api-reference/types/xy-position
ZIndexModehttps://reactflow.dev/api-reference/types/z-index-mode
Utilshttps://reactflow.dev/api-reference/utils
addEdge()https://reactflow.dev/api-reference/utils/add-edge
applyEdgeChanges()https://reactflow.dev/api-reference/utils/apply-edge-changes
applyNodeChanges()https://reactflow.dev/api-reference/utils/apply-node-changes
getBezierPath()https://reactflow.dev/api-reference/utils/get-bezier-path
getConnectedEdges()https://reactflow.dev/api-reference/utils/get-connected-edges
getIncomers()https://reactflow.dev/api-reference/utils/get-incomers
getNodesBounds()https://reactflow.dev/api-reference/utils/get-nodes-bounds
getOutgoers()https://reactflow.dev/api-reference/utils/get-outgoers
getSimpleBezierPath()https://reactflow.dev/api-reference/utils/get-simple-bezier-path
getSmoothStepPath()https://reactflow.dev/api-reference/utils/get-smooth-step-path
getStraightPath()https://reactflow.dev/api-reference/utils/get-straight-path
getViewportForBounds()https://reactflow.dev/api-reference/utils/get-viewport-for-bounds
isEdge()https://reactflow.dev/api-reference/utils/is-edge
isNode()https://reactflow.dev/api-reference/utils/is-node
reconnectEdge()https://reactflow.dev/api-reference/utils/reconnect-edge
Exampleshttps://reactflow.dev/examples
Feature Overviewhttps://reactflow.dev/examples/overview
Add Node on Edge Drophttps://reactflow.dev/examples/nodes/add-node-on-edge-drop
Connection Limithttps://reactflow.dev/examples/nodes/connection-limit
Custom Nodehttps://reactflow.dev/examples/nodes/custom-node
Delete Middle Nodehttps://reactflow.dev/examples/nodes/delete-middle-node
Drag Handlehttps://reactflow.dev/examples/nodes/drag-handle
Easy Connecthttps://reactflow.dev/examples/nodes/easy-connect
Intersectionshttps://reactflow.dev/examples/nodes/intersections
Node Resizerhttps://reactflow.dev/examples/nodes/node-resizer
Node Toolbarhttps://reactflow.dev/examples/nodes/node-toolbar
Proximity Connecthttps://reactflow.dev/examples/nodes/proximity-connect
Rotatable Nodehttps://reactflow.dev/examples/nodes/rotatable-node
Node Position Animationhttps://reactflow.dev/examples/nodes/node-position-animation
Stresshttps://reactflow.dev/examples/nodes/stress
Update Nodehttps://reactflow.dev/examples/nodes/update-node
Shapeshttps://reactflow.dev/examples/nodes/shapes
Animating Edgeshttps://reactflow.dev/examples/edges/animating-edges
Custom Connection Linehttps://reactflow.dev/examples/edges/custom-connectionline
Custom Edgeshttps://reactflow.dev/examples/edges/custom-edges
Delete Edge on Drophttps://reactflow.dev/examples/edges/delete-edge-on-drop
Edge Label Rendererhttps://reactflow.dev/examples/edges/edge-label-renderer
Edge Intersectionhttps://reactflow.dev/examples/edges/edge-intersection
Edge Toolbarhttps://reactflow.dev/examples/edges/edge-toolbar
Edge Typeshttps://reactflow.dev/examples/edges/edge-types
Floating Edgeshttps://reactflow.dev/examples/edges/floating-edges
Markershttps://reactflow.dev/examples/edges/markers
Multi Connection Linehttps://reactflow.dev/examples/edges/multi-connection-line
Reconnect Edgehttps://reactflow.dev/examples/edges/reconnect-edge
Simple Floating Edgeshttps://reactflow.dev/examples/edges/simple-floating-edges
Temporary Edgeshttps://reactflow.dev/examples/edges/temporary-edges
Editable Edgehttps://reactflow.dev/examples/edges/editable-edge
Computing Flowshttps://reactflow.dev/examples/interaction/computing-flows
Connection Eventshttps://reactflow.dev/examples/interaction/connection-events
Context Menuhttps://reactflow.dev/examples/interaction/context-menu
Contextual Zoomhttps://reactflow.dev/examples/interaction/contextual-zoom
Drag and Drophttps://reactflow.dev/examples/interaction/drag-and-drop
Prevent Cycleshttps://reactflow.dev/examples/interaction/prevent-cycles
Save and Restorehttps://reactflow.dev/examples/interaction/save-and-restore
Touch Devicehttps://reactflow.dev/examples/interaction/touch-device
Validationhttps://reactflow.dev/examples/interaction/validation
Helper Lineshttps://reactflow.dev/examples/interaction/helper-lines
Collaborativehttps://reactflow.dev/examples/interaction/collaborative
Copy Pastehttps://reactflow.dev/examples/interaction/copy-paste
Undo Redohttps://reactflow.dev/examples/interaction/undo-redo
Selection Groupinghttps://reactflow.dev/examples/grouping/selection-grouping
Parent Child Relationhttps://reactflow.dev/examples/grouping/parent-child-relation
Sub Flowshttps://reactflow.dev/examples/grouping/sub-flows
Dagrehttps://reactflow.dev/examples/layout/dagre
Elkjshttps://reactflow.dev/examples/layout/elkjs
Elkjs Multiple Handleshttps://reactflow.dev/examples/layout/elkjs-multiple-handles
Horizontalhttps://reactflow.dev/examples/layout/horizontal
Expand Collapsehttps://reactflow.dev/examples/layout/expand-collapse
Auto Layouthttps://reactflow.dev/examples/layout/auto-layout
Force Layouthttps://reactflow.dev/examples/layout/force-layout
Dynamic Layoutinghttps://reactflow.dev/examples/layout/dynamic-layouting
Node Collisionshttps://reactflow.dev/examples/layout/node-collisions
Base Stylehttps://reactflow.dev/examples/styling/base-style
Dark Modehttps://reactflow.dev/examples/styling/dark-mode
Tailwindhttps://reactflow.dev/examples/styling/tailwind
Turbo Flowhttps://reactflow.dev/examples/styling/turbo-flow
Eraserhttps://reactflow.dev/examples/whiteboard/eraser
Lasso Selectionhttps://reactflow.dev/examples/whiteboard/lasso-selection
Rectanglehttps://reactflow.dev/examples/whiteboard/rectangle
Freehand Drawhttps://reactflow.dev/examples/whiteboard/freehand-draw
Download Imagehttps://reactflow.dev/examples/misc/download-image
Server Side Image Creationhttps://reactflow.dev/examples/misc/server-side-image-creation
Introductionhttps://reactflow.dev/ui
AI Workflow Editorhttps://reactflow.dev/ui/templates/ai-workflow-editor
Workflow Editorhttps://reactflow.dev/ui/templates/workflow-editor
Base Nodehttps://reactflow.dev/ui/components/base-node
Status Indicatorhttps://reactflow.dev/ui/components/node-status-indicator
Appendixhttps://reactflow.dev/ui/components/node-appendix
Tooltiphttps://reactflow.dev/ui/components/node-tooltip
Database Schemahttps://reactflow.dev/ui/components/database-schema-node
Placeholderhttps://reactflow.dev/ui/components/placeholder-node
Labeled Grouphttps://reactflow.dev/ui/components/labeled-group-node
Base Handlehttps://reactflow.dev/ui/components/base-handle
Labeled Handlehttps://reactflow.dev/ui/components/labeled-handle
Button Handlehttps://reactflow.dev/ui/components/button-handle
Edge with Buttonhttps://reactflow.dev/ui/components/button-edge
Edge with Node Datahttps://reactflow.dev/ui/components/data-edge
Animated SVG Edgehttps://reactflow.dev/ui/components/animated-svg-edge
Node Searchhttps://reactflow.dev/ui/components/node-search
Zoom Sliderhttps://reactflow.dev/ui/components/zoom-slider
Zoom Selecthttps://reactflow.dev/ui/components/zoom-select
DevToolshttps://reactflow.dev/ui/components/devtools
Request a Component https://github.com/xyflow/web/discussions/new?category=ui-component-requests
Showcasehttps://reactflow.dev/showcase
Changeloghttps://reactflow.dev/whats-new
Blog https://xyflow.com/blog
Contact Us https://xyflow.com/contact
Playground https://play.reactflow.dev
API Referencehttps://reactflow.dev/api-reference
https://reactflow.dev/api-reference/react-flow
https://reactflow.dev/api-reference/react-flow-provider
Componentshttps://reactflow.dev/api-reference/components
https://reactflow.dev/api-reference/components/background
https://reactflow.dev/api-reference/components/base-edge
https://reactflow.dev/api-reference/components/control-button
https://reactflow.dev/api-reference/components/controls
https://reactflow.dev/api-reference/components/edge-label-renderer
https://reactflow.dev/api-reference/components/edge-text
https://reactflow.dev/api-reference/components/edge-toolbar
https://reactflow.dev/api-reference/components/handle
https://reactflow.dev/api-reference/components/minimap
https://reactflow.dev/api-reference/components/node-resize-control
https://reactflow.dev/api-reference/components/node-resizer
https://reactflow.dev/api-reference/components/node-toolbar
https://reactflow.dev/api-reference/components/panel
https://reactflow.dev/api-reference/components/viewport-portal
Hookshttps://reactflow.dev/api-reference/hooks
useConnection()https://reactflow.dev/api-reference/hooks/use-connection
useEdges()https://reactflow.dev/api-reference/hooks/use-edges
useEdgesState()https://reactflow.dev/api-reference/hooks/use-edges-state
useHandleConnections()https://reactflow.dev/api-reference/hooks/use-handle-connections
useInternalNode()https://reactflow.dev/api-reference/hooks/use-internal-node
useKeyPress()https://reactflow.dev/api-reference/hooks/use-key-press
useNodeConnections()https://reactflow.dev/api-reference/hooks/use-node-connections
useNodeId()https://reactflow.dev/api-reference/hooks/use-node-id
useNodes()https://reactflow.dev/api-reference/hooks/use-nodes
useNodesData()https://reactflow.dev/api-reference/hooks/use-nodes-data
useNodesInitialized()https://reactflow.dev/api-reference/hooks/use-nodes-initialized
useNodesState()https://reactflow.dev/api-reference/hooks/use-nodes-state
useOnSelectionChange()https://reactflow.dev/api-reference/hooks/use-on-selection-change
useOnViewportChange()https://reactflow.dev/api-reference/hooks/use-on-viewport-change
useReactFlow()https://reactflow.dev/api-reference/hooks/use-react-flow
useStore()https://reactflow.dev/api-reference/hooks/use-store
useStoreApi()https://reactflow.dev/api-reference/hooks/use-store-api
useUpdateNodeInternals()https://reactflow.dev/api-reference/hooks/use-update-node-internals
useViewport()https://reactflow.dev/api-reference/hooks/use-viewport
Typeshttps://reactflow.dev/api-reference/types
Alignhttps://reactflow.dev/api-reference/types/align
AriaLabelConfighttps://reactflow.dev/api-reference/types/aria-label-config
BackgroundVarianthttps://reactflow.dev/api-reference/types/background-variant
ColorModehttps://reactflow.dev/api-reference/types/color-mode
Connectionhttps://reactflow.dev/api-reference/types/connection
ConnectionLineComponenthttps://reactflow.dev/api-reference/types/connection-line-component
ConnectionLineComponentPropshttps://reactflow.dev/api-reference/types/connection-line-component-props
ConnectionLineTypehttps://reactflow.dev/api-reference/types/connection-line-type
ConnectionModehttps://reactflow.dev/api-reference/types/connection-mode
ConnectionStatehttps://reactflow.dev/api-reference/types/connection-state
CoordinateExtenthttps://reactflow.dev/api-reference/types/coordinate-extent
DefaultEdgeOptionshttps://reactflow.dev/api-reference/types/default-edge-options
DeleteElementshttps://reactflow.dev/api-reference/types/delete-elements
Edgehttps://reactflow.dev/api-reference/types/edge
EdgeChangehttps://reactflow.dev/api-reference/types/edge-change
EdgeMarkerhttps://reactflow.dev/api-reference/types/edge-marker
EdgeMouseHandlerhttps://reactflow.dev/api-reference/types/edge-mouse-handler
EdgePropshttps://reactflow.dev/api-reference/types/edge-props
EdgeTypeshttps://reactflow.dev/api-reference/types/edge-types
FitViewOptionshttps://reactflow.dev/api-reference/types/fit-view-options
Handlehttps://reactflow.dev/api-reference/types/handle
HandleConnectionhttps://reactflow.dev/api-reference/types/handle-connection
InternalNodehttps://reactflow.dev/api-reference/types/internal-node
IsValidConnectionhttps://reactflow.dev/api-reference/types/is-valid-connection
KeyCodehttps://reactflow.dev/api-reference/types/key-code
MarkerTypehttps://reactflow.dev/api-reference/types/marker-type
MiniMapNodePropshttps://reactflow.dev/api-reference/types/mini-map-node-props
Nodehttps://reactflow.dev/api-reference/types/node
NodeChangehttps://reactflow.dev/api-reference/types/node-change
NodeConnectionhttps://reactflow.dev/api-reference/types/node-connection
NodeHandlehttps://reactflow.dev/api-reference/types/node-handle
NodeMouseHandlerhttps://reactflow.dev/api-reference/types/node-mouse-handler
NodeOriginhttps://reactflow.dev/api-reference/types/node-origin
NodePropshttps://reactflow.dev/api-reference/types/node-props
NodeTypeshttps://reactflow.dev/api-reference/types/node-types
OnBeforeDeletehttps://reactflow.dev/api-reference/types/on-before-delete
OnConnecthttps://reactflow.dev/api-reference/types/on-connect
OnConnectEndhttps://reactflow.dev/api-reference/types/on-connect-end
OnConnectStarthttps://reactflow.dev/api-reference/types/on-connect-start
OnDeletehttps://reactflow.dev/api-reference/types/on-delete
OnEdgesChangehttps://reactflow.dev/api-reference/types/on-edges-change
OnEdgesDeletehttps://reactflow.dev/api-reference/types/on-edges-delete
OnErrorhttps://reactflow.dev/api-reference/types/on-error
OnInithttps://reactflow.dev/api-reference/types/on-init
OnMovehttps://reactflow.dev/api-reference/types/on-move
OnNodeDraghttps://reactflow.dev/api-reference/types/on-node-drag
OnNodesChangehttps://reactflow.dev/api-reference/types/on-nodes-change
OnNodesDeletehttps://reactflow.dev/api-reference/types/on-nodes-delete
OnReconnecthttps://reactflow.dev/api-reference/types/on-reconnect
OnSelectionChangeFunchttps://reactflow.dev/api-reference/types/on-selection-change-func
PanOnScrollModehttps://reactflow.dev/api-reference/types/pan-on-scroll-mode
PanelPositionhttps://reactflow.dev/api-reference/types/panel-position
Positionhttps://reactflow.dev/api-reference/types/position
ProOptionshttps://reactflow.dev/api-reference/types/pro-options
ReactFlowInstancehttps://reactflow.dev/api-reference/types/react-flow-instance
ReactFlowJsonObjecthttps://reactflow.dev/api-reference/types/react-flow-json-object
Recthttps://reactflow.dev/api-reference/types/rect
ResizeParamshttps://reactflow.dev/api-reference/types/resize-params
SelectionDragHandlerhttps://reactflow.dev/api-reference/types/selection-drag-handler
SelectionModehttps://reactflow.dev/api-reference/types/selection-mode
SnapGridhttps://reactflow.dev/api-reference/types/snap-grid
Viewporthttps://reactflow.dev/api-reference/types/viewport
XYPositionhttps://reactflow.dev/api-reference/types/xy-position
ZIndexModehttps://reactflow.dev/api-reference/types/z-index-mode
Utilshttps://reactflow.dev/api-reference/utils
addEdge()https://reactflow.dev/api-reference/utils/add-edge
applyEdgeChanges()https://reactflow.dev/api-reference/utils/apply-edge-changes
applyNodeChanges()https://reactflow.dev/api-reference/utils/apply-node-changes
getBezierPath()https://reactflow.dev/api-reference/utils/get-bezier-path
getConnectedEdges()https://reactflow.dev/api-reference/utils/get-connected-edges
getIncomers()https://reactflow.dev/api-reference/utils/get-incomers
getNodesBounds()https://reactflow.dev/api-reference/utils/get-nodes-bounds
getOutgoers()https://reactflow.dev/api-reference/utils/get-outgoers
getSimpleBezierPath()https://reactflow.dev/api-reference/utils/get-simple-bezier-path
getSmoothStepPath()https://reactflow.dev/api-reference/utils/get-smooth-step-path
getStraightPath()https://reactflow.dev/api-reference/utils/get-straight-path
getViewportForBounds()https://reactflow.dev/api-reference/utils/get-viewport-for-bounds
isEdge()https://reactflow.dev/api-reference/utils/is-edge
isNode()https://reactflow.dev/api-reference/utils/is-node
reconnectEdge()https://reactflow.dev/api-reference/utils/reconnect-edge
Edit this page on GitHub https://github.com/xyflow/web/tree/main/sites/reactflow.dev/src/content/api-reference/types/index.mdx
Questions? Contact Us https://xyflow.com/contact
React Flow 12.10.0https://reactflow.dev/whats-new/2025-12-04
React Flow UI Components updated to React 19 and Tailwind CSS 4https://reactflow.dev/whats-new/2025-10-28
React Flow 12.9.0https://reactflow.dev/whats-new/2025-10-20
...and more!https://reactflow.dev/whats-new
Launchhttps://play.reactflow.dev
Referencehttps://reactflow.dev/api-reference
Alignhttps://reactflow.dev/api-reference/types/align
Read more https://reactflow.dev/api-reference/types/align
AriaLabelConfighttps://reactflow.dev/api-reference/types/aria-label-config
Read more https://reactflow.dev/api-reference/types/aria-label-config
BackgroundVarianthttps://reactflow.dev/api-reference/types/background-variant
Read more https://reactflow.dev/api-reference/types/background-variant
ColorModehttps://reactflow.dev/api-reference/types/color-mode
Read more https://reactflow.dev/api-reference/types/color-mode
Connectionhttps://reactflow.dev/api-reference/types/connection
Read more https://reactflow.dev/api-reference/types/connection
ConnectionLineComponenthttps://reactflow.dev/api-reference/types/connection-line-component
Read more https://reactflow.dev/api-reference/types/connection-line-component
ConnectionLineComponentPropshttps://reactflow.dev/api-reference/types/connection-line-component-props
Read more https://reactflow.dev/api-reference/types/connection-line-component-props
ConnectionLineTypehttps://reactflow.dev/api-reference/types/connection-line-type
Read more https://reactflow.dev/api-reference/types/connection-line-type
ConnectionModehttps://reactflow.dev/api-reference/types/connection-mode
Read more https://reactflow.dev/api-reference/types/connection-mode
ConnectionStatehttps://reactflow.dev/api-reference/types/connection-state
Read more https://reactflow.dev/api-reference/types/connection-state
CoordinateExtenthttps://reactflow.dev/api-reference/types/coordinate-extent
Read more https://reactflow.dev/api-reference/types/coordinate-extent
DefaultEdgeOptionshttps://reactflow.dev/api-reference/types/default-edge-options
Read more https://reactflow.dev/api-reference/types/default-edge-options
DeleteElementshttps://reactflow.dev/api-reference/types/delete-elements
Read more https://reactflow.dev/api-reference/types/delete-elements
Edgehttps://reactflow.dev/api-reference/types/edge
Read more https://reactflow.dev/api-reference/types/edge
EdgeChangehttps://reactflow.dev/api-reference/types/edge-change
Read more https://reactflow.dev/api-reference/types/edge-change
EdgeMarkerhttps://reactflow.dev/api-reference/types/edge-marker
Read more https://reactflow.dev/api-reference/types/edge-marker
EdgeMouseHandlerhttps://reactflow.dev/api-reference/types/edge-mouse-handler
Read more https://reactflow.dev/api-reference/types/edge-mouse-handler
EdgePropshttps://reactflow.dev/api-reference/types/edge-props
Read more https://reactflow.dev/api-reference/types/edge-props
EdgeTypeshttps://reactflow.dev/api-reference/types/edge-types
Read more https://reactflow.dev/api-reference/types/edge-types
FitViewOptionshttps://reactflow.dev/api-reference/types/fit-view-options
Read more https://reactflow.dev/api-reference/types/fit-view-options
Handlehttps://reactflow.dev/api-reference/types/handle
Read more https://reactflow.dev/api-reference/types/handle
HandleConnectionhttps://reactflow.dev/api-reference/types/handle-connection
Read more https://reactflow.dev/api-reference/types/handle-connection
InternalNodehttps://reactflow.dev/api-reference/types/internal-node
Read more https://reactflow.dev/api-reference/types/internal-node
IsValidConnectionhttps://reactflow.dev/api-reference/types/is-valid-connection
Read more https://reactflow.dev/api-reference/types/is-valid-connection
KeyCodehttps://reactflow.dev/api-reference/types/key-code
Read more https://reactflow.dev/api-reference/types/key-code
MarkerTypehttps://reactflow.dev/api-reference/types/marker-type
Read more https://reactflow.dev/api-reference/types/marker-type
MiniMapNodePropshttps://reactflow.dev/api-reference/types/mini-map-node-props
Read more https://reactflow.dev/api-reference/types/mini-map-node-props
Nodehttps://reactflow.dev/api-reference/types/node
Read more https://reactflow.dev/api-reference/types/node
NodeChangehttps://reactflow.dev/api-reference/types/node-change
Read more https://reactflow.dev/api-reference/types/node-change
NodeConnectionhttps://reactflow.dev/api-reference/types/node-connection
Read more https://reactflow.dev/api-reference/types/node-connection
NodeHandlehttps://reactflow.dev/api-reference/types/node-handle
Read more https://reactflow.dev/api-reference/types/node-handle
NodeMouseHandlerhttps://reactflow.dev/api-reference/types/node-mouse-handler
Read more https://reactflow.dev/api-reference/types/node-mouse-handler
NodeOriginhttps://reactflow.dev/api-reference/types/node-origin
Read more https://reactflow.dev/api-reference/types/node-origin
NodePropshttps://reactflow.dev/api-reference/types/node-props
Read more https://reactflow.dev/api-reference/types/node-props
NodeTypeshttps://reactflow.dev/api-reference/types/node-types
Read more https://reactflow.dev/api-reference/types/node-types
OnBeforeDeletehttps://reactflow.dev/api-reference/types/on-before-delete
Read more https://reactflow.dev/api-reference/types/on-before-delete
OnConnecthttps://reactflow.dev/api-reference/types/on-connect
Read more https://reactflow.dev/api-reference/types/on-connect
OnConnectEndhttps://reactflow.dev/api-reference/types/on-connect-end
Read more https://reactflow.dev/api-reference/types/on-connect-end
OnConnectStarthttps://reactflow.dev/api-reference/types/on-connect-start
Read more https://reactflow.dev/api-reference/types/on-connect-start
OnDeletehttps://reactflow.dev/api-reference/types/on-delete
Read more https://reactflow.dev/api-reference/types/on-delete
OnEdgesChangehttps://reactflow.dev/api-reference/types/on-edges-change
Read more https://reactflow.dev/api-reference/types/on-edges-change
OnEdgesDeletehttps://reactflow.dev/api-reference/types/on-edges-delete
Read more https://reactflow.dev/api-reference/types/on-edges-delete
OnErrorhttps://reactflow.dev/api-reference/types/on-error
Read more https://reactflow.dev/api-reference/types/on-error
OnInithttps://reactflow.dev/api-reference/types/on-init
Read more https://reactflow.dev/api-reference/types/on-init
OnMovehttps://reactflow.dev/api-reference/types/on-move
Read more https://reactflow.dev/api-reference/types/on-move
OnNodeDraghttps://reactflow.dev/api-reference/types/on-node-drag
Read more https://reactflow.dev/api-reference/types/on-node-drag
OnNodesChangehttps://reactflow.dev/api-reference/types/on-nodes-change
Read more https://reactflow.dev/api-reference/types/on-nodes-change
OnNodesDeletehttps://reactflow.dev/api-reference/types/on-nodes-delete
Read more https://reactflow.dev/api-reference/types/on-nodes-delete
OnReconnecthttps://reactflow.dev/api-reference/types/on-reconnect
Read more https://reactflow.dev/api-reference/types/on-reconnect
OnSelectionChangeFunchttps://reactflow.dev/api-reference/types/on-selection-change-func
Read more https://reactflow.dev/api-reference/types/on-selection-change-func
PanOnScrollModehttps://reactflow.dev/api-reference/types/pan-on-scroll-mode
Read more https://reactflow.dev/api-reference/types/pan-on-scroll-mode
PanelPositionhttps://reactflow.dev/api-reference/types/panel-position
Read more https://reactflow.dev/api-reference/types/panel-position
Positionhttps://reactflow.dev/api-reference/types/position
Read more https://reactflow.dev/api-reference/types/position
ProOptionshttps://reactflow.dev/api-reference/types/pro-options
Read more https://reactflow.dev/api-reference/types/pro-options
ReactFlowInstancehttps://reactflow.dev/api-reference/types/react-flow-instance
Read more https://reactflow.dev/api-reference/types/react-flow-instance
ReactFlowJsonObjecthttps://reactflow.dev/api-reference/types/react-flow-json-object
Read more https://reactflow.dev/api-reference/types/react-flow-json-object
Recthttps://reactflow.dev/api-reference/types/rect
Read more https://reactflow.dev/api-reference/types/rect
ResizeParamshttps://reactflow.dev/api-reference/types/resize-params
Read more https://reactflow.dev/api-reference/types/resize-params
SelectionDragHandlerhttps://reactflow.dev/api-reference/types/selection-drag-handler
Read more https://reactflow.dev/api-reference/types/selection-drag-handler
SelectionModehttps://reactflow.dev/api-reference/types/selection-mode
Read more https://reactflow.dev/api-reference/types/selection-mode
SnapGridhttps://reactflow.dev/api-reference/types/snap-grid
Read more https://reactflow.dev/api-reference/types/snap-grid
Viewporthttps://reactflow.dev/api-reference/types/viewport
Read more https://reactflow.dev/api-reference/types/viewport
XYPositionhttps://reactflow.dev/api-reference/types/xy-position
Read more https://reactflow.dev/api-reference/types/xy-position
ZIndexModehttps://reactflow.dev/api-reference/types/z-index-mode
Read more https://reactflow.dev/api-reference/types/z-index-mode
useViewport()https://reactflow.dev/api-reference/hooks/use-viewport
Alignhttps://reactflow.dev/api-reference/types/align
Getting Startedhttps://reactflow.dev/learn
API Referencehttps://reactflow.dev/api-reference
Exampleshttps://reactflow.dev/examples
Componentshttps://reactflow.dev/components
Showcasehttps://reactflow.dev/showcase
Playgroundhttps://play.reactflow.dev
Discordhttps://discord.gg/RVmnytFmGW
Githubhttps://github.com/xyflow
X / Twitterhttps://x.com/xyflowdev
Blueskyhttps://bsky.app/profile/xyflow.com
Bloghttps://xyflow.com/blog
Open Sourcehttps://xyflow.com/open-source
Abouthttps://xyflow.com/about
Contacthttps://xyflow.com/contact
Careershttps://xyflow.com/careers
MIT Licensehttps://github.com/xyflow/xyflow/blob/main/LICENSE
Code of Conducthttps://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md
Imprinthttps://xyflow.com/imprint
webkid GmbHhttps://webkid.io
Facu Montanarohttps://facumontanaro.com/

Viewport: width=device-width, initial-scale=1

Robots: index,follow


URLs of crawlers that visited me.