Custom Edges

Draw your own paths, add labels and buttons, and animate data flowing between nodes.

Intermediate · 8 min read · Updated Oct 31, 2026

Path helpers

getBezierPath, getSmoothStepPath and getStraightPath compute an SVG path plus a label position, so you only design the look.

A labelled edge

EdgeLabelRenderer lets you render HTML labels above the SVG layer.

tsx

function LabelEdge(props) {
  const [path, x, y] = getSmoothStepPath(props);
  return (
    <>
      <BaseEdge path={path} />
      <EdgeLabelRenderer>
        <div style={{ transform: `translate(-50%,-50%) translate(${x}px,${y}px)` }}>
          {props.data.label}
        </div>
      </EdgeLabelRenderer>
    </>
  );
}

Previous← Custom Nodes Next guideLayouting →