Flow Canvas

Pan by dragging empty space or holding Space, and zoom smoothly around the pointer. Typed nodes (Trigger, Action, Condition, Delay, Output) are filled cards that lift when selected. Drag from an output to pull out a wire that sags on a spring: inputs glow as it nears, it snaps into the closest one, and ports that can't take it shake. Press Run and a pulse travels from the trigger along the branch the Condition picks. Each node spins, then checks off with its time in mono, and the path it took stays lit. Includes marquee and Shift-click selection, snap to grid, an animated Tidy layout, undo, duplicate, a draggable minimap and a full keyboard path with announcements.

npx shadcn@latest add @obsyde/flow-canvas

import { FlowCanvas } from '@/components/obsyde/ember/flow-canvas/FlowCanvas';

export function Example() {
  return (
    <FlowCanvas />
  );
}