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
• SmartSimpleBezierEdge: smart equivalent to SimpleBezierEdge
• SmartFloatingEdge: floating edges example with obstacle routing
• SmartEditableEdge: editable edge example with pathfinding between segments
• SmartCheckpointEdge: fixed waypoints from edge.data.checkpoints (library-only; no React Flow example)
• createSmartEdge: configure presets at module scope
• getSmartEdge: build fully custom smart edges
• SmartEdgeProvider and useSmartEdgePath: every smart edge routes through this provider, off the main thread on a Web Worker by default

Support

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

Next steps

• Quick start to wire up your first smart edge
• Edge types to compare presets with live demos
• Performance for how the routing pipeline stays off the main thread on large graphs
• Migrating to v5 if you're upgrading from an earlier version
• Storybook on Chromatic for the full interactive story catalog