React Flow Smart Edge

Custom edges for React Flow that never intersect with other nodes, using pathfinding.

Documentation

Full documentation: tisoap.github.io/react-flow-smart-edge/docs

Interactive Storybook examples are published on Chromatic. Source: src/stories/SmartEdge.stories.tsx.

Install

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

Requires React Flow v12+ (@xyflow/react).

Quick example

import { ReactFlow } from "@xyflow/react";
import { SmartBezierEdge } from "@tisoap/react-flow-smart-edge";
import "@xyflow/react/dist/style.css";

const nodes = [
  { id: "1", data: { label: "Node 1" }, position: { x: 300, y: 100 } },
  { id: "2", data: { label: "Node 2" }, position: { x: 300, y: 200 } },
];

const edges = [{ id: "e21", source: "2", target: "1", type: "smart" }];

const edgeTypes = { smart: SmartBezierEdge };

export function Graph() {
  return (
    <ReactFlow
      defaultNodes={nodes}
      defaultEdges={edges}
      edgeTypes={edgeTypes}
      fitView
    />
  );
}

Edge components

Export	React Flow equivalent
SmartBezierEdge	BezierEdge
SmartStraightEdge	StraightEdge
SmartStepEdge	StepEdge
SmartSmoothStepEdge	SmoothStepEdge
SmartFloatingEdge	Floating edges example
SmartEditableEdge	Editable edge example

Configure options with createSmartEdge("step", { gridRatio: 5 }) or build custom edges with getSmartEdge. See the docs for guides, API reference, and live examples.

Support

Development

npm ci
npm run storybook    # demos + tests (port 6006)
npm run docs         # Docusaurus dev server → http://localhost:3000/docs
npm run check        # lint, types, spellcheck
npm run test         # Storybook interaction tests
npm run build-docs   # static docs site → website/build

License

MIT