Edges

Beginner · 2 min read · Updated Nov 6, 2026

Custom Edges: Create Interactive Connections

Custom Edges allow developers to design unique connections between nodes in React Flow. Instead of using default edge styles, you can create custom SVG paths, add labels, include interactive buttons, and implement advanced connection behaviors.

They are particularly useful for building professional workflow editors, automation platforms, visual programming tools, and interactive diagrams.

1. Creating a Custom Edge Component

A custom edge is a React component that defines how connections appear between nodes. React Flow provides utilities such as getBezierPath() to calculate the SVG path between two connected nodes.

Code Example

import {
  BaseEdge,
  getBezierPath,
} from '@xyflow/react';

export function CustomEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
  } = props;

  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <BaseEdge
      id={id}
      path={edgePath}
      style={{ stroke: '#6366f1', strokeWidth: 2 }}
    />
  );
}

This creates a custom Bezier connection with a personalized color and stroke width.

2. Registering Custom Edge Types

After creating your custom edge component, register it using the edgeTypes object. This allows React Flow to identify and render your custom edge whenever it is used.

Code Example

import { CustomEdge } from './CustomEdge';

const edgeTypes = {
  custom: CustomEdge,
};

Keep the edgeTypes object outside your main component to avoid unnecessary re-renders.

3. Adding Custom Edges to React Flow

Assign your registered edge type to an edge using its type property. You can also define source and target node IDs to establish the connection.

Code Example

const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'custom',
  },
];

This tells React Flow to render the connection using your custom edge component.

4. Using Custom Edges in ReactFlow

Pass the registered edgeTypes object to the <ReactFlow /> component to enable custom edge rendering.

Code Example

import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={initialEdges}
        edgeTypes={edgeTypes}
        fitView
      />
    </div>
  );
}

You can now display customized connections throughout your workflow canvas.

5. Adding Labels to Custom Edges

React Flow provides EdgeLabelRenderer to display HTML elements, such as text labels, along custom edges. Use getBezierPath() to calculate the label position.

Code Example

import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
} from '@xyflow/react';

export function LabeledEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
  } = props;

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <>
      <BaseEdge id={id} path={edgePath} />

      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: 'all',
          }}
          className="nodrag nopan"
        >
          Connection
        </div>
      </EdgeLabelRenderer>
    </>
  );
}

Edge labels are useful for displaying conditions, connection names, workflow statuses, and relationship descriptions.

6. Adding Interactive Buttons to Edges

Custom edges can include interactive buttons for actions such as deleting connections, opening settings, or triggering workflow operations. Use EdgeLabelRenderer to position buttons along the edge.

Code Example

import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
} from '@xyflow/react';

export function ButtonEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    markerEnd,
    style,
    data,
  } = props;

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <>
      <BaseEdge
        id={id}
        path={edgePath}
        markerEnd={markerEnd}
        style={style}
      />

      <EdgeLabelRenderer>
        <button
          className="nodrag nopan"
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: 'all',
          }}
          onClick={() => data?.onAction?.(id)}
        >
          Action
        </button>
      </EdgeLabelRenderer>
    </>
  );
}

You can pass an onAction callback through the edge's data property to handle application-specific actions.

7. Customizing Edge Paths and Styles

React Flow supports different edge path utilities, allowing developers to create unique connection layouts. You can customize stroke colors, widths, dash patterns, and animations.

Code Example

import {
  BaseEdge,
  getSmoothStepPath,
} from '@xyflow/react';

export function StyledEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
  } = props;

  const [edgePath] = getSmoothStepPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <BaseEdge
      id={id}
      path={edgePath}
      style={{
        stroke: '#8b5cf6',
        strokeWidth: 2,
        strokeDasharray: '5 5',
      }}
    />
  );
}

Custom edge paths and styles help developers create visually distinctive workflow connections.

8. Adding Arrow Markers to Custom Edges

React Flow supports SVG markers that display arrows at the beginning or end of an edge. Use MarkerType to indicate connection direction.

Code Example

import {
  ReactFlow,
  MarkerType,
} from '@xyflow/react';

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'custom',
    markerEnd: {
      type: MarkerType.ArrowClosed,
      color: '#6366f1',
    },
    style: {
      stroke: '#6366f1',
      strokeWidth: 2,
    },
  },
];

Arrow markers improve diagram readability by making connection directions easier to understand.

Custom EdgeOpen in New Tab

Previous← Handles Next guideUtility Classes →