FancyUI
Saved GitHub Get started
A dark sketch canvas: a hand-drawn rectangle labelled draft, an arrow being dragged from it, and an ellipse outlined in blue where the arrow will attach.
Captured from the project's demo · Excalidraw · MIT licence · Source ↗

Whiteboard — arrow binding

Excalidraw OPEN SOURCE

Drag an arrow near a shape and the shape lights up: release, and the arrow is attached.

#playful#minimal#drag

Visit source

Related FancyUI components

  • AnimatedBeam

    Draws a lit path between two fixed nodes; nothing is drawn or attached by the visitor.

    pnpm add fancy-ui-svelte
    import { AnimatedBeam } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Drag
Style
Playful, Minimal
Framework of source
React
Code availability
Open source

Why it works

While an arrow is being drawn, the shape under its tip gets a soft blue outline: the canvas announces the connection before you commit. Once bound, moving either shape drags the arrow's end with it. The hand-drawn stroke keeps the whole canvas feeling like a sketch, so rough diagrams read as drafts.

When to use it

Diagram and flow editors, node canvases, any tool where links between objects must survive moves.

Things to watch

Binding by proximity needs an escape (a modifier key) for the times you do not want it. The highlight is colour only; pair it with a shape change for low vision. Canvas content needs a text alternative.

Implementation clues

  • hit test against shape outlines
  • preview outline before commit
  • store binding, recompute on move
  • seeded rough strokes