Introduction

Custom edges for React Flow that never intersect with other nodes, using grid-based A* pathfinding.

Install

With npm:

npm install @tisoap/react-flow-smart-edge

With yarn:

yarn add @tisoap/react-flow-smart-edge

This package requires React Flow v12+ (@xyflow/react).

What you get

• SmartBezierEdge — smart equivalent to React Flow's BezierEdge
• SmartStraightEdge — smart equivalent to StraightEdge
• SmartStepEdge — smart equivalent to StepEdge
• SmartSmoothStepEdge — smart equivalent to SmoothStepEdge
• SmartFloatingEdge — floating connection points (like React Flow's floating edges example)
• SmartEditableEdge — draggable waypoints with pathfinding between segments
• createSmartEdge — configure presets at module scope
• getSmartEdge — build fully custom smart edges

Support

Like this project? Buy me a coffee or sponsor on GitHub.

Next steps

• Quick start — wire up your first smart edge
• Edge types — compare presets with live demos
• Storybook on Chromatic — full interactive story catalog