René's URL Explorer Experiment

Title: NodeOrigin - React Flow

Open Graph Title: NodeOrigin - React Flow

X Title: NodeOrigin - React Flow

Description: The origin of a Node determines how it is placed relative to its own coordinates.

Open Graph Description: The origin of a Node determines how it is placed relative to its own coordinates.

X Description: The origin of a Node determines how it is placed relative to its own coordinates.

Keywords:

react
node-based UI
graph
diagram
workflow
react-flow
xyflow

Mail addresses
info@xyflow.com

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

X: https://x.com/xyflowdev

Generator: Next.js

direct link

Domain: reactflow.dev

theme-color	rgb(17,17,17)
application-name	React Flow
docsearch:site	react
mobile-web-app-capable	yes
apple-mobile-web-app-title	React Flow
apple-mobile-web-app-status-bar-style	default
og:site_name	React Flow
og:locale	en_US
og:image:type	image/jpeg
og:image:width	1200
og:image:height	640
og:image	https://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a
og:type	website
twitter:card	summary_large_image
twitter:creator	@xyflowdev
twitter:image:type	image/jpeg
twitter:image:width	1200
twitter:image:height	640
twitter:image	https://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a

Links:

Skip to Content	https://reactflow.dev/api-reference/types/node-origin#nextra-skip-nav
🚨 New Example: Handling Node Collisions!	https://reactflow.dev/examples/layout/node-collisions
React Flow	https://reactflow.dev/
Learn	https://reactflow.dev/learn
Reference	https://reactflow.dev/api-reference
Examples	https://reactflow.dev/examples
UI	https://reactflow.dev/ui
Showcase	https://reactflow.dev/showcase
GitHub	https://github.com/xyflow/xyflow
Discord	https://discord.gg/RVmnytFmGW
React FlowPro	https://reactflow.dev/pro
Quick Start	https://reactflow.dev/learn
Overview	https://reactflow.dev/learn/concepts/terms-and-definitions
Building a Flow	https://reactflow.dev/learn/concepts/building-a-flow
Adding Interactivity	https://reactflow.dev/learn/concepts/adding-interactivity
The Viewport	https://reactflow.dev/learn/concepts/the-viewport
Built-In Components	https://reactflow.dev/learn/concepts/built-in-components
Nodes	https://reactflow.dev/learn/customization/custom-nodes
Handles	https://reactflow.dev/learn/customization/handles
Edges	https://reactflow.dev/learn/customization/custom-edges
Edge Labels	https://reactflow.dev/learn/customization/edge-labels
Utility Classes	https://reactflow.dev/learn/customization/utility-classes
Theming	https://reactflow.dev/learn/customization/theming
Overview	https://reactflow.dev/learn/layouting/layouting
Sub Flows	https://reactflow.dev/learn/layouting/sub-flows
Hooks and Providers	https://reactflow.dev/learn/advanced-use/hooks-providers
Accessibility	https://reactflow.dev/learn/advanced-use/accessibility
Testing	https://reactflow.dev/learn/advanced-use/testing
TypeScript	https://reactflow.dev/learn/advanced-use/typescript
Uncontrolled Flow	https://reactflow.dev/learn/advanced-use/uncontrolled-flow
Performance	https://reactflow.dev/learn/advanced-use/performance
State Management	https://reactflow.dev/learn/advanced-use/state-management
Computing Flows	https://reactflow.dev/learn/advanced-use/computing-flows
Server Side Rendering	https://reactflow.dev/learn/advanced-use/ssr-ssg-configuration
Devtools	https://reactflow.dev/learn/advanced-use/devtools-and-debugging
Whiteboard Features	https://reactflow.dev/learn/advanced-use/whiteboard
Slideshow App	https://reactflow.dev/learn/tutorials/slide-shows-with-react-flow
Web Audio API	https://reactflow.dev/learn/tutorials/react-flow-and-the-web-audio-api
Mind Map App	https://reactflow.dev/learn/tutorials/mind-map-app-with-react-flow
React Flow UI	https://reactflow.dev/learn/tutorials/getting-started-with-react-flow-components
Common Errors	https://reactflow.dev/learn/troubleshooting/common-errors
Remove Attribution	https://reactflow.dev/learn/troubleshooting/remove-attribution
Migrate to v12	https://reactflow.dev/learn/troubleshooting/migrate-to-v12
Migrate to v11	https://reactflow.dev/learn/troubleshooting/migrate-to-v11
Migrate to v10	https://reactflow.dev/learn/troubleshooting/migrate-to-v10
API Reference	https://reactflow.dev/api-reference
API Reference	https://reactflow.dev/api-reference
	https://reactflow.dev/api-reference/react-flow
	https://reactflow.dev/api-reference/react-flow-provider
Components	https://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
Hooks	https://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
Types	https://reactflow.dev/api-reference/types
Align	https://reactflow.dev/api-reference/types/align
AriaLabelConfig	https://reactflow.dev/api-reference/types/aria-label-config
BackgroundVariant	https://reactflow.dev/api-reference/types/background-variant
ColorMode	https://reactflow.dev/api-reference/types/color-mode
Connection	https://reactflow.dev/api-reference/types/connection
ConnectionLineComponent	https://reactflow.dev/api-reference/types/connection-line-component
ConnectionLineComponentProps	https://reactflow.dev/api-reference/types/connection-line-component-props
ConnectionLineType	https://reactflow.dev/api-reference/types/connection-line-type
ConnectionMode	https://reactflow.dev/api-reference/types/connection-mode
ConnectionState	https://reactflow.dev/api-reference/types/connection-state
CoordinateExtent	https://reactflow.dev/api-reference/types/coordinate-extent
DefaultEdgeOptions	https://reactflow.dev/api-reference/types/default-edge-options
DeleteElements	https://reactflow.dev/api-reference/types/delete-elements
Edge	https://reactflow.dev/api-reference/types/edge
EdgeChange	https://reactflow.dev/api-reference/types/edge-change
EdgeMarker	https://reactflow.dev/api-reference/types/edge-marker
EdgeMouseHandler	https://reactflow.dev/api-reference/types/edge-mouse-handler
EdgeProps	https://reactflow.dev/api-reference/types/edge-props
EdgeTypes	https://reactflow.dev/api-reference/types/edge-types
FitViewOptions	https://reactflow.dev/api-reference/types/fit-view-options
Handle	https://reactflow.dev/api-reference/types/handle
HandleConnection	https://reactflow.dev/api-reference/types/handle-connection
InternalNode	https://reactflow.dev/api-reference/types/internal-node
IsValidConnection	https://reactflow.dev/api-reference/types/is-valid-connection
KeyCode	https://reactflow.dev/api-reference/types/key-code
MarkerType	https://reactflow.dev/api-reference/types/marker-type
MiniMapNodeProps	https://reactflow.dev/api-reference/types/mini-map-node-props
Node	https://reactflow.dev/api-reference/types/node
NodeChange	https://reactflow.dev/api-reference/types/node-change
NodeConnection	https://reactflow.dev/api-reference/types/node-connection
NodeHandle	https://reactflow.dev/api-reference/types/node-handle
NodeMouseHandler	https://reactflow.dev/api-reference/types/node-mouse-handler
NodeOrigin	https://reactflow.dev/api-reference/types/node-origin
NodeProps	https://reactflow.dev/api-reference/types/node-props
NodeTypes	https://reactflow.dev/api-reference/types/node-types
OnBeforeDelete	https://reactflow.dev/api-reference/types/on-before-delete
OnConnect	https://reactflow.dev/api-reference/types/on-connect
OnConnectEnd	https://reactflow.dev/api-reference/types/on-connect-end
OnConnectStart	https://reactflow.dev/api-reference/types/on-connect-start
OnDelete	https://reactflow.dev/api-reference/types/on-delete
OnEdgesChange	https://reactflow.dev/api-reference/types/on-edges-change
OnEdgesDelete	https://reactflow.dev/api-reference/types/on-edges-delete
OnError	https://reactflow.dev/api-reference/types/on-error
OnInit	https://reactflow.dev/api-reference/types/on-init
OnMove	https://reactflow.dev/api-reference/types/on-move
OnNodeDrag	https://reactflow.dev/api-reference/types/on-node-drag
OnNodesChange	https://reactflow.dev/api-reference/types/on-nodes-change
OnNodesDelete	https://reactflow.dev/api-reference/types/on-nodes-delete
OnReconnect	https://reactflow.dev/api-reference/types/on-reconnect
OnSelectionChangeFunc	https://reactflow.dev/api-reference/types/on-selection-change-func
PanOnScrollMode	https://reactflow.dev/api-reference/types/pan-on-scroll-mode
PanelPosition	https://reactflow.dev/api-reference/types/panel-position
Position	https://reactflow.dev/api-reference/types/position
ProOptions	https://reactflow.dev/api-reference/types/pro-options
ReactFlowInstance	https://reactflow.dev/api-reference/types/react-flow-instance
ReactFlowJsonObject	https://reactflow.dev/api-reference/types/react-flow-json-object
Rect	https://reactflow.dev/api-reference/types/rect
ResizeParams	https://reactflow.dev/api-reference/types/resize-params
SelectionDragHandler	https://reactflow.dev/api-reference/types/selection-drag-handler
SelectionMode	https://reactflow.dev/api-reference/types/selection-mode
SnapGrid	https://reactflow.dev/api-reference/types/snap-grid
Viewport	https://reactflow.dev/api-reference/types/viewport
XYPosition	https://reactflow.dev/api-reference/types/xy-position
ZIndexMode	https://reactflow.dev/api-reference/types/z-index-mode
Utils	https://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
Examples	https://reactflow.dev/examples
Feature Overview	https://reactflow.dev/examples/overview
Add Node on Edge Drop	https://reactflow.dev/examples/nodes/add-node-on-edge-drop
Connection Limit	https://reactflow.dev/examples/nodes/connection-limit
Custom Node	https://reactflow.dev/examples/nodes/custom-node
Delete Middle Node	https://reactflow.dev/examples/nodes/delete-middle-node
Drag Handle	https://reactflow.dev/examples/nodes/drag-handle
Easy Connect	https://reactflow.dev/examples/nodes/easy-connect
Intersections	https://reactflow.dev/examples/nodes/intersections
Node Resizer	https://reactflow.dev/examples/nodes/node-resizer
Node Toolbar	https://reactflow.dev/examples/nodes/node-toolbar
Proximity Connect	https://reactflow.dev/examples/nodes/proximity-connect
Rotatable Node	https://reactflow.dev/examples/nodes/rotatable-node
Node Position Animation	https://reactflow.dev/examples/nodes/node-position-animation
Stress	https://reactflow.dev/examples/nodes/stress
Update Node	https://reactflow.dev/examples/nodes/update-node
Shapes	https://reactflow.dev/examples/nodes/shapes
Animating Edges	https://reactflow.dev/examples/edges/animating-edges
Custom Connection Line	https://reactflow.dev/examples/edges/custom-connectionline
Custom Edges	https://reactflow.dev/examples/edges/custom-edges
Delete Edge on Drop	https://reactflow.dev/examples/edges/delete-edge-on-drop
Edge Label Renderer	https://reactflow.dev/examples/edges/edge-label-renderer
Edge Intersection	https://reactflow.dev/examples/edges/edge-intersection
Edge Toolbar	https://reactflow.dev/examples/edges/edge-toolbar
Edge Types	https://reactflow.dev/examples/edges/edge-types
Floating Edges	https://reactflow.dev/examples/edges/floating-edges
Markers	https://reactflow.dev/examples/edges/markers
Multi Connection Line	https://reactflow.dev/examples/edges/multi-connection-line
Reconnect Edge	https://reactflow.dev/examples/edges/reconnect-edge
Simple Floating Edges	https://reactflow.dev/examples/edges/simple-floating-edges
Temporary Edges	https://reactflow.dev/examples/edges/temporary-edges
Editable Edge	https://reactflow.dev/examples/edges/editable-edge
Computing Flows	https://reactflow.dev/examples/interaction/computing-flows
Connection Events	https://reactflow.dev/examples/interaction/connection-events
Context Menu	https://reactflow.dev/examples/interaction/context-menu
Contextual Zoom	https://reactflow.dev/examples/interaction/contextual-zoom
Drag and Drop	https://reactflow.dev/examples/interaction/drag-and-drop
Prevent Cycles	https://reactflow.dev/examples/interaction/prevent-cycles
Save and Restore	https://reactflow.dev/examples/interaction/save-and-restore
Touch Device	https://reactflow.dev/examples/interaction/touch-device
Validation	https://reactflow.dev/examples/interaction/validation
Helper Lines	https://reactflow.dev/examples/interaction/helper-lines
Collaborative	https://reactflow.dev/examples/interaction/collaborative
Copy Paste	https://reactflow.dev/examples/interaction/copy-paste
Undo Redo	https://reactflow.dev/examples/interaction/undo-redo
Selection Grouping	https://reactflow.dev/examples/grouping/selection-grouping
Parent Child Relation	https://reactflow.dev/examples/grouping/parent-child-relation
Sub Flows	https://reactflow.dev/examples/grouping/sub-flows
Dagre	https://reactflow.dev/examples/layout/dagre
Elkjs	https://reactflow.dev/examples/layout/elkjs
Elkjs Multiple Handles	https://reactflow.dev/examples/layout/elkjs-multiple-handles
Horizontal	https://reactflow.dev/examples/layout/horizontal
Expand Collapse	https://reactflow.dev/examples/layout/expand-collapse
Auto Layout	https://reactflow.dev/examples/layout/auto-layout
Force Layout	https://reactflow.dev/examples/layout/force-layout
Dynamic Layouting	https://reactflow.dev/examples/layout/dynamic-layouting
Node Collisions	https://reactflow.dev/examples/layout/node-collisions
Base Style	https://reactflow.dev/examples/styling/base-style
Dark Mode	https://reactflow.dev/examples/styling/dark-mode
Tailwind	https://reactflow.dev/examples/styling/tailwind
Turbo Flow	https://reactflow.dev/examples/styling/turbo-flow
Eraser	https://reactflow.dev/examples/whiteboard/eraser
Lasso Selection	https://reactflow.dev/examples/whiteboard/lasso-selection
Rectangle	https://reactflow.dev/examples/whiteboard/rectangle
Freehand Draw	https://reactflow.dev/examples/whiteboard/freehand-draw
Download Image	https://reactflow.dev/examples/misc/download-image
Server Side Image Creation	https://reactflow.dev/examples/misc/server-side-image-creation
Introduction	https://reactflow.dev/ui
AI Workflow Editor	https://reactflow.dev/ui/templates/ai-workflow-editor
Workflow Editor	https://reactflow.dev/ui/templates/workflow-editor
Base Node	https://reactflow.dev/ui/components/base-node
Status Indicator	https://reactflow.dev/ui/components/node-status-indicator
Appendix	https://reactflow.dev/ui/components/node-appendix
Tooltip	https://reactflow.dev/ui/components/node-tooltip
Database Schema	https://reactflow.dev/ui/components/database-schema-node
Placeholder	https://reactflow.dev/ui/components/placeholder-node
Labeled Group	https://reactflow.dev/ui/components/labeled-group-node
Base Handle	https://reactflow.dev/ui/components/base-handle
Labeled Handle	https://reactflow.dev/ui/components/labeled-handle
Button Handle	https://reactflow.dev/ui/components/button-handle
Edge with Button	https://reactflow.dev/ui/components/button-edge
Edge with Node Data	https://reactflow.dev/ui/components/data-edge
Animated SVG Edge	https://reactflow.dev/ui/components/animated-svg-edge
Node Search	https://reactflow.dev/ui/components/node-search
Zoom Slider	https://reactflow.dev/ui/components/zoom-slider
Zoom Select	https://reactflow.dev/ui/components/zoom-select
DevTools	https://reactflow.dev/ui/components/devtools
Request a Component	https://github.com/xyflow/web/discussions/new?category=ui-component-requests
Showcase	https://reactflow.dev/showcase
Changelog	https://reactflow.dev/whats-new
Blog	https://xyflow.com/blog
Contact Us	https://xyflow.com/contact
Playground	https://play.reactflow.dev
API Reference	https://reactflow.dev/api-reference
	https://reactflow.dev/api-reference/react-flow
	https://reactflow.dev/api-reference/react-flow-provider
Components	https://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
Hooks	https://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
Types	https://reactflow.dev/api-reference/types
Align	https://reactflow.dev/api-reference/types/align
AriaLabelConfig	https://reactflow.dev/api-reference/types/aria-label-config
BackgroundVariant	https://reactflow.dev/api-reference/types/background-variant
ColorMode	https://reactflow.dev/api-reference/types/color-mode
Connection	https://reactflow.dev/api-reference/types/connection
ConnectionLineComponent	https://reactflow.dev/api-reference/types/connection-line-component
ConnectionLineComponentProps	https://reactflow.dev/api-reference/types/connection-line-component-props
ConnectionLineType	https://reactflow.dev/api-reference/types/connection-line-type
ConnectionMode	https://reactflow.dev/api-reference/types/connection-mode
ConnectionState	https://reactflow.dev/api-reference/types/connection-state
CoordinateExtent	https://reactflow.dev/api-reference/types/coordinate-extent
DefaultEdgeOptions	https://reactflow.dev/api-reference/types/default-edge-options
DeleteElements	https://reactflow.dev/api-reference/types/delete-elements
Edge	https://reactflow.dev/api-reference/types/edge
EdgeChange	https://reactflow.dev/api-reference/types/edge-change
EdgeMarker	https://reactflow.dev/api-reference/types/edge-marker
EdgeMouseHandler	https://reactflow.dev/api-reference/types/edge-mouse-handler
EdgeProps	https://reactflow.dev/api-reference/types/edge-props
EdgeTypes	https://reactflow.dev/api-reference/types/edge-types
FitViewOptions	https://reactflow.dev/api-reference/types/fit-view-options
Handle	https://reactflow.dev/api-reference/types/handle
HandleConnection	https://reactflow.dev/api-reference/types/handle-connection
InternalNode	https://reactflow.dev/api-reference/types/internal-node
IsValidConnection	https://reactflow.dev/api-reference/types/is-valid-connection
KeyCode	https://reactflow.dev/api-reference/types/key-code
MarkerType	https://reactflow.dev/api-reference/types/marker-type
MiniMapNodeProps	https://reactflow.dev/api-reference/types/mini-map-node-props
Node	https://reactflow.dev/api-reference/types/node
NodeChange	https://reactflow.dev/api-reference/types/node-change
NodeConnection	https://reactflow.dev/api-reference/types/node-connection
NodeHandle	https://reactflow.dev/api-reference/types/node-handle
NodeMouseHandler	https://reactflow.dev/api-reference/types/node-mouse-handler
NodeOrigin	https://reactflow.dev/api-reference/types/node-origin
NodeProps	https://reactflow.dev/api-reference/types/node-props
NodeTypes	https://reactflow.dev/api-reference/types/node-types
OnBeforeDelete	https://reactflow.dev/api-reference/types/on-before-delete
OnConnect	https://reactflow.dev/api-reference/types/on-connect
OnConnectEnd	https://reactflow.dev/api-reference/types/on-connect-end
OnConnectStart	https://reactflow.dev/api-reference/types/on-connect-start
OnDelete	https://reactflow.dev/api-reference/types/on-delete
OnEdgesChange	https://reactflow.dev/api-reference/types/on-edges-change
OnEdgesDelete	https://reactflow.dev/api-reference/types/on-edges-delete
OnError	https://reactflow.dev/api-reference/types/on-error
OnInit	https://reactflow.dev/api-reference/types/on-init
OnMove	https://reactflow.dev/api-reference/types/on-move
OnNodeDrag	https://reactflow.dev/api-reference/types/on-node-drag
OnNodesChange	https://reactflow.dev/api-reference/types/on-nodes-change
OnNodesDelete	https://reactflow.dev/api-reference/types/on-nodes-delete
OnReconnect	https://reactflow.dev/api-reference/types/on-reconnect
OnSelectionChangeFunc	https://reactflow.dev/api-reference/types/on-selection-change-func
PanOnScrollMode	https://reactflow.dev/api-reference/types/pan-on-scroll-mode
PanelPosition	https://reactflow.dev/api-reference/types/panel-position
Position	https://reactflow.dev/api-reference/types/position
ProOptions	https://reactflow.dev/api-reference/types/pro-options
ReactFlowInstance	https://reactflow.dev/api-reference/types/react-flow-instance
ReactFlowJsonObject	https://reactflow.dev/api-reference/types/react-flow-json-object
Rect	https://reactflow.dev/api-reference/types/rect
ResizeParams	https://reactflow.dev/api-reference/types/resize-params
SelectionDragHandler	https://reactflow.dev/api-reference/types/selection-drag-handler
SelectionMode	https://reactflow.dev/api-reference/types/selection-mode
SnapGrid	https://reactflow.dev/api-reference/types/snap-grid
Viewport	https://reactflow.dev/api-reference/types/viewport
XYPosition	https://reactflow.dev/api-reference/types/xy-position
ZIndexMode	https://reactflow.dev/api-reference/types/z-index-mode
Utils	https://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/node-origin.mdx
Questions? Contact Us	https://xyflow.com/contact
React Flow 12.10.0	https://reactflow.dev/whats-new/2025-12-04
React Flow UI Components updated to React 19 and Tailwind CSS 4	https://reactflow.dev/whats-new/2025-10-28
React Flow 12.9.0	https://reactflow.dev/whats-new/2025-10-20
...and more!	https://reactflow.dev/whats-new
Launch	https://play.reactflow.dev
Reference	https://reactflow.dev/api-reference
Types	https://reactflow.dev/api-reference/types
NodeMouseHandler	https://reactflow.dev/api-reference/types/node-mouse-handler
NodeProps	https://reactflow.dev/api-reference/types/node-props
Getting Started	https://reactflow.dev/learn
API Reference	https://reactflow.dev/api-reference
Examples	https://reactflow.dev/examples
Components	https://reactflow.dev/components
Showcase	https://reactflow.dev/showcase
Playground	https://play.reactflow.dev
Discord	https://discord.gg/RVmnytFmGW
Github	https://github.com/xyflow
X / Twitter	https://x.com/xyflowdev
Bluesky	https://bsky.app/profile/xyflow.com
Blog	https://xyflow.com/blog
Open Source	https://xyflow.com/open-source
About	https://xyflow.com/about
Contact	https://xyflow.com/contact
Careers	https://xyflow.com/careers
MIT License	https://github.com/xyflow/xyflow/blob/main/LICENSE
Code of Conduct	https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md
Imprint	https://xyflow.com/imprint
webkid GmbH	https://webkid.io
Facu Montanaro	https://facumontanaro.com/

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

Robots: index,follow

URLs of crawlers that visited me.