Editable Edge

This example explains how to implement a routable and editable edge with draggable control points to change the path of an edge. It also includes a custom connection line that can be used to draw a freeform edge. For this you need to press “Space” while doing a connection.

This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.