KQ-1109 · NODE/WIRE

Node Wire

A node editor whose cables are real cables: drag from an output jack and a Verlet rope pays out 1:1 under the finger, every compatible input shows its capture ring, and within the snap radius the plug is caught, flicks into the jack and seats with a jack snap; let go anywhere else and the cable reels back into its output. Nodes drag by their headers and glide on springs.glide, carrying the release velocity to where a light throw would rest, while their cables swing behind them on a fixed-step loop that runs only while something moves. Enter picks up a cable, Arrow keys choose among the inputs that take it, Enter plugs in and Escape lets it reel back; on a node's grip, Arrow keys move the node.

KQ-1109 · NODE/WIRE

1 of 3 inputs wired · savings not wired yet

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/node-wire

Props

nodes: NodeWireNode[]; default —; The node cards: { id, label, x, y, inputs?, outputs? }, with x and y as fractions (0 to 1) of the free space and ports as { id, label, type }. Ids contain no dots.
value / defaultValue: NodeWireLink[]; default []; The cables, each { from, to } written "node.port" from an output to an input. Controlled or uncontrolled.
onValueChange: (links: NodeWireLink[]) => void; default —; Fires from the plug or unplug that changed the cables, with all of them. A plugged cable waits at its jack for a controlled host and reels back if the host does not take it.
canConnect: (from: string, to: string) => boolean; default —; An extra rule on top of matching types, given "node.port" of each end.
label: string; default —; The canvas's accessible name.
sag: number; default 0.5; Slack in each cable, 0 to 1: 0 is a straight wire, 1 hangs in a deep loop that lies on the canvas floor. In curve mode, the droop of the curve.
stiffness: number; default 0.5; 0 to 1: a limp string that swings long, up to a thick lead that arcs and settles fast (constraint passes, bending and damping). In curve mode, how hard the cable is pulled onto its curve.
snap: number; default 24; Capture radius around a compatible input, in px, 12 to 40, drawn as a ring while a cable is carried.
wire: "rope" | "curve"; default "rope"; rope hangs free under gravity; curve springs the same cable onto the tidy editor curve that leaves each jack horizontally.
height: number; default 200; Canvas height in px.
sound: boolean; default false; Play the cable's synthesised sounds: a slither while a cable or a wired node moves, a detent when a ring catches the plug, a jack snap when it seats, a pop when it comes out. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the canvas and blocks every drag, press and key.
className: string; default —; Merged onto the canvas's classes.

Prop	Type	Default	Description
nodes	NodeWireNode[]	—	The node cards: { id, label, x, y, inputs?, outputs? }, with x and y as fractions (0 to 1) of the free space and ports as { id, label, type }. Ids contain no dots.
value / defaultValue	NodeWireLink[]	[]	The cables, each { from, to } written "node.port" from an output to an input. Controlled or uncontrolled.
onValueChange	(links: NodeWireLink[]) => void	—	Fires from the plug or unplug that changed the cables, with all of them. A plugged cable waits at its jack for a controlled host and reels back if the host does not take it.
canConnect	(from: string, to: string) => boolean	—	An extra rule on top of matching types, given "node.port" of each end.
label	string	—	The canvas's accessible name.
sag	number	0.5	Slack in each cable, 0 to 1: 0 is a straight wire, 1 hangs in a deep loop that lies on the canvas floor. In curve mode, the droop of the curve.
stiffness	number	0.5	0 to 1: a limp string that swings long, up to a thick lead that arcs and settles fast (constraint passes, bending and damping). In curve mode, how hard the cable is pulled onto its curve.
snap	number	24	Capture radius around a compatible input, in px, 12 to 40, drawn as a ring while a cable is carried.
wire	"rope" \| "curve"	"rope"	rope hangs free under gravity; curve springs the same cable onto the tidy editor curve that leaves each jack horizontally.
height	number	200	Canvas height in px.
sound	boolean	false	Play the cable's synthesised sounds: a slither while a cable or a wired node moves, a detent when a ring catches the plug, a jack snap when it seats, a pop when it comes out. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the canvas and blocks every drag, press and key.
className	string	—	Merged onto the canvas's classes.