Edge Overlapping

A visual flow builder with circuit-style "hop" edges, plus the publishable npm package that powers them.

Design flow diagrams with draggable nodes and orthogonal wires that hop over crossings — just like a real schematic.

---

What's in this repo

This is a Bun workspaces monorepo with two parts:

Path	What it is
packages/react-flow-edge-overlapping	The publishable npm package — circuit-style hop edges for React Flow.
src/	A TanStack Start demo app that uses the package as a live playground.

The package

react-flow-edge-overlapping is a drop-in custom edge for React Flow / @xyflow/react. When two wires cross, the edge on top draws a small bridge arc ("hop") over the one underneath.

npm install react-flow-edge-overlapping

import { HopEdge } from "react-flow-edge-overlapping";

const edgeTypes = { hop: HopEdge };
// give edges `type: "hop"` and you're done.

See the package README for full docs, configuration, and the API reference.

Running the demo

Requires Bun.

bun install        # install deps and link the workspace package
bun run dev        # start the demo app on http://localhost:8080

Then drag nodes around the canvas and watch the wires hop over each other.

Other scripts

Command	Description
bun run dev	Start the demo dev server.
bun run build	Build the demo app for production.
bun run lint	Lint the codebase.
bun run format	Format with Prettier.

Building & publishing the package

cd packages/react-flow-edge-overlapping
bun run build               # emits dist/ (ESM + CJS + .d.ts) via tsup
npm pack --dry-run          # preview the exact files that will be published
npm publish --access public --otp=YOUR_6_DIGIT_CODE

Tech stack

• React 19 + TypeScript
• @xyflow/react (React Flow v12)
• TanStack Start + Vite (demo app)
• Tailwind CSS (demo styling)
• tsup (package bundling)

Support

More React Flow templates and examples: VisualFlow

License

MIT