Patchbay

Connects supplied source and destination ports through a keyboard-navigable matrix, with signal types, channel groups, and blocked-route reasons.

Preview

Output connections

Source / destination	MonitorOutputs · audio	ClockSync · control
MixBus · audio		Signal types differ: audio to control.

In action

Route the studio

Monitor patch · local routing state

Output connections

Source / destination	Monitor leftInterface · audio	Monitor rightInterface · audio	ClockSync · control
Mix leftMix bus · audio			Signal types differ: audio to control.
Mix rightMix bus · audio			Signal types differ: audio to control.

Choose a crosspoint to connect or disconnect. Different signal types remain blocked.

When to use

Use it for

An audio or signal-routing matrix whose ports and confirmed connections come from the host.
value/defaultValue/onValueChange for controlled routing requests or a local prototype; the host applies real routing changes.
Signal type strings must match; getBlockReason can add a host-specific restriction with a visible explanation.
Existing incompatible connections can be disconnected; routes involving unavailable ports remain explicitly listed and preserved.

Not for

Assuming the component creates audio streams, manages clocking, or configures a routing engine.
Silently deleting host connections when a port temporarily disappears.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Patchbay } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/patchbay.

2. Vendor the source

npx @noorddev/vlak-cli add patchbay

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/patchbay.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Patchbay } from "@noorddev/vlak-react";

<Patchbay label="Studio routing" name="routes"
  sources={[{ id: "mix-l", label: "Mix left", group: "Mix bus", signalType: "audio" }]}
  destinations={[{ id: "out-l", label: "Monitor left", group: "Outputs", signalType: "audio" }, { id: "clock", label: "Clock", signalType: "control" }]}
  defaultValue={[{ sourceId: "mix-l", destinationId: "out-l" }]} />

Props

Patchbay

A connection matrix for supplied ports; the caller owns the routing engine.

Prop	Type	Default	Description
`label`required	`ReactNode`
`sources`required	`PatchPort[]`
`destinations`required	`PatchPort[]`
`value`	`PatchConnection[]`
`defaultValue`	`PatchConnection[]`	`[]`
`onValueChange`	`(connections: PatchConnection[]) => void`
`getBlockReason`	`(source: PatchPort, destination: PatchPort) => string \| null`		Additional host constraints. Matching signal types are required by default.
`readOnly`	`boolean`

Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange">.

Keyboard

Keys	Does
`Tab`	Enters the connection matrix at one enabled checkbox, then leaves the matrix.
`Arrow keys`	Moves focus through enabled crosspoints in the same row or column.
`Home, End`	Moves to the first or last enabled crosspoint in the row; Control includes the whole matrix.
`Space`	Toggles the focused connection through the native checkbox.

Accessibility

Native table headers identify sources and destinations; every checkbox also names both ports.
Connection targets are at least 44px, with a full-surface checked state and forced-colors support.
Blocked crosspoints expose reasons in text and descriptions. Roving focus skips disabled cells.
Named checkboxes submit connection pairs; read-only hidden values preserve existing routes. Form reset restores uncontrolled defaults.
The ref and native fieldset attributes reach the root fieldset.

Markup

<fieldset class="rs-patchbay"><legend class="rs-patchbay-legend">Studio routing</legend><div class="rs-patchbay-viewport"><table class="rs-patchbay-table"><thead><tr><th class="rs-patchbay-header" scope="col">Source / destination</th><th class="rs-patchbay-header" scope="col">Monitor left<span class="rs-patchbay-detail">Outputs · audio</span></th></tr></thead><tbody><tr><th class="rs-patchbay-header" scope="row">Mix left<span class="rs-patchbay-detail">Mix bus · audio</span></th><td class="rs-patchbay-cell"><label class="rs-patchbay-control rs-patchbay-connected"><span aria-hidden="true">✓</span><input class="rs-patchbay-input" type="checkbox" checked aria-label="Mix left to Monitor left" /></label></td></tr></tbody></table></div></fieldset>

Classes

.rs-patchbay.rs-patchbay-legend.rs-patchbay-viewport.rs-patchbay-table.rs-patchbay-header.rs-patchbay-detail.rs-patchbay-cell.rs-patchbay-control.rs-patchbay-connected.rs-patchbay-blocked.rs-patchbay-input.rs-patchbay-note