Skip to main content

​
Connection

Connection params that are passed when onConnect is called.
​
source
string
required
Source node id
​
target
string
required
Target node id
​
sourceHandle
string | null
Source handle id
​
targetHandle
string | null
Target handle id

​
Example

const connection: Connection = {
  source: 'node-1',
  target: 'node-2',
  sourceHandle: 'output',
  targetHandle: 'input'
}

​
NodeConnection

Connection with an associated edge id. 
type NodeConnection = Connection & {
  edgeId: string
}

​
Connector

Function type for custom connection handlers. 
type Connector = (
  params: Connection,
) => Promise<(Connection & Partial<Edge>) | false> | 
     ((Connection & Partial<Edge>) | false)
Return false to prevent the connection, or return connection params merged with edge properties.

​
Example

const connector: Connector = async (connection) => {
  // Validate connection
  if (!isValidConnection(connection)) {
    return false
  }
  
  // Return connection with additional edge properties
  return {
    ...connection,
    animated: true,
    style: { stroke: '#ff0000' }
  }
}

​
ConnectionStatus

Status of a connection in progress. 
type ConnectionStatus = 'valid' | 'invalid'

​
OnConnectStartParams

Parameters passed when a connection is initiated.
​
handleId
string | null
required
Source handle id
​
nodeId
string
Source node id
​
handleType
HandleType
Source handle type ('source' or 'target')

​
ConnectionMode

Connection mode enum determining handle behavior. 
enum ConnectionMode {
  Strict = 'strict',
  Loose = 'loose'
}
  • Strict: Connections can only be made from source handles to target handles
  • Loose: All handles are treated as source handles, allowing more flexible connections

​
ConnectionLineType

Enum for connection line visual types. 
enum ConnectionLineType {
  Bezier = 'default',
  SimpleBezier = 'simple-bezier',
  Straight = 'straight',
  Step = 'step',
  SmoothStep = 'smoothstep'
}

​
ConnectionLineOptions

Configuration options for the connection line.
​
type
ConnectionLineType
Visual type of the connection line
​
style
CSSProperties
Custom styles for the connection line
​
class
string
CSS class for the connection line
​
markerStart
EdgeMarkerType
Marker at the start of the connection line
​
markerEnd
EdgeMarkerType
Marker at the end of the connection line

​
Example

const connectionLineOptions: ConnectionLineOptions = {
  type: ConnectionLineType.SmoothStep,
  style: { 
    stroke: '#4A90E2',
    strokeWidth: 2 
  },
  markerEnd: 'arrow'
}

​
ConnectionLineProps

Props passed to custom connection line components.
​
sourceX
number
Source X position of the connection line
​
sourceY
number
Source Y position of the connection line
​
sourcePosition
Position
Source position of the connection line
​
targetX
number
Target X position of the connection line
​
targetY
number
Target Y position of the connection line
​
targetPosition
Position
Target position of the connection line
​
sourceNode
GraphNode
The source node of the connection line
​
sourceHandle
HandleElement | null
The source handle element (not the DOM element)
​
targetNode
GraphNode | null
The target node of the connection line (null while dragging)
​
targetHandle
HandleElement | null
The target handle element (null while dragging)
​
markerStart
string
Marker URL for start
​
markerEnd
string
Marker URL for end
​
connectionStatus
ConnectionStatus | null
Status of the connection (valid or invalid)

​
HandleElement

Represents a handle element in the flow. 
interface HandleElement extends XYPosition, Dimensions {
  id?: string | null
  position: Position
  type: HandleType
  nodeId: string
}
​
id
string | null
Handle identifier
​
position
Position
required
Position of the handle
​
type
HandleType
required
Type of handle ('source' or 'target')
​
nodeId
string
required
Node id this handle belongs to
​
x
number
required
X coordinate
​
y
number
required
Y coordinate
​
width
number
required
Handle width
​
height
number
required
Handle height

​
ConnectionLookup

Map structure for fast connection lookups. 
type ConnectionLookup = Map<string, Map<string, NodeConnection>>
Nested map structure:
  • First key: node id
  • Second key: handle id
  • Value: NodeConnection object

​
Example Usage

// Access connections for a specific node and handle
const nodeConnections = connectionLookup.get('node-1')
const handleConnections = nodeConnections?.get('handle-a')

​
ConnectionInProgress

Represents an active connection being dragged. 
interface ConnectionInProgress<NodeType extends GraphNode = GraphNode> {
  inProgress: true
  isValid: boolean | null
  from: XYPosition
  fromHandle: HandleElement
  fromPosition: Position
  fromNode: NodeType
  to: XYPosition
  toHandle: ConnectingHandle | null
  toPosition: Position
  toNode: NodeType | null
}
​
inProgress
true
required
Always true for active connections
​
isValid
boolean | null
required
Whether the connection is valid, invalid, or not yet determined
​
from
XYPosition
required
Start position
​
fromHandle
HandleElement
required
Source handle
​
fromNode
GraphNode
required
Source node
​
to
XYPosition
required
Current cursor position
​
toHandle
ConnectingHandle | null
required
Target handle (null if hovering over nothing)
​
toNode
GraphNode | null
required
Target node (null if hovering over nothing)

Build docs developers (and LLMs) love

Get started for freeTalk to us