Edges connect nodes together in a flow. This page explains how to define, customize, and interact with edges in Reflex Flow.

An edge is represented as a Python dictionary with the following fields:

• id (str) – Unique identifier for the edge.
• source (str) – ID of the source node.
• target (str) – ID of the target node.
• type (str) – Edge type defined in edge_types.
• sourceHandle (str | None) – Optional source handle ID.
• targetHandle (str | None) – Optional target handle ID.
• animated (bool) – Whether the edge should animate.
• hidden (bool) – Whether the edge is hidden.
• deletable (bool) – Whether the edge can be removed.
• selectable (bool) – Whether the edge can be selected.
• data (dict) – Arbitrary metadata.
• label (Any) – Label rendered along the edge.
• style (dict) – Custom styles.
• className (str) – CSS class for the edge.

Reflex Flow comes with several built-in edge types:

• default – Standard curved edge
• straight – Direct line between nodes
• step – Right-angled path with steps
• smoothstep – Smooth right-angled path
• bezier – Curved bezier path

Add visual styling to edges using the style property:

Make edges animate with flowing dots:

Add text labels to edges:

React Flow in Reflex also allows you to define custom edge types. This is useful when you want edges to carry extra functionality (like buttons, labels, or dynamic styling) beyond the default straight or bezier connectors.