A Next.js control UI for an X32 mixer. The browser loads an editable mixer configuration and talks over WebSocket to the Node OSC bridge, which sends and receives OSC over UDP for the mixer.

Status and limitations

This is an operational mixer-control application, not a standalone web site: the UI, OSC/WebSocket bridge, configuration file, and reachable X32 must all be available. The page includes a placeholder Recording tab. No automated test suite is present. The bridge imports ws, but it is not declared as a direct dependency in package.json; a clean installation has not been verified.

Prerequisites

Node.js and npm (the repository includes package-lock.json).
Network access to the X32 for the OSC bridge.
A writable mixer configuration file and the X32 address/port values for the target environment.
Docker and Docker Compose only when using the supplied Compose file.

Configuration

Create a local configuration from the tracked shape:

cp config.sample.json config.json

config.json is ignored by Git. The Next.js configuration API reads CONFIG_PATH, defaulting to ./config.json, and writes configuration changes back to that path. The webserver.port in the JSON selects the browser's WebSocket endpoint; the sample uses 3001. Do not commit environment-specific mixer addresses or credentials.

The bridge reads these environment variables:

X32_IP — X32 address.
X32_PORT — X32 OSC port.

The Compose file reads .env and passes X32_IP, X32_PORT, CONFIG_PATH, and POLLING_INTERVAL. POLLING_INTERVAL is passed by Compose but has no inspected runtime use. Compose does not mount a configuration file, so provide/configure one in the image or runtime environment before relying on its configuration API.

Development

Install the locked npm dependency tree:

npm ci

Run the two required processes in separate terminals:

npm run dev
npm run start:websocket

The development web server uses the Next.js dev script. The bridge listens on WebSocket port 3001; its OSC UDP listener uses local port 57122. The UI obtains its WebSocket host from config.json (webserver.ip if set, otherwise the browser host) and its port from webserver.port.

Declared npm scripts:

npm run build
npm run start
npm run lint

build then start runs the production Next.js server. lint is the only declared validation command; there is no declared test command.

Containers and operations

The supplied Compose configuration builds two services and exposes the web service on 3000 and the OSC/WebSocket service on 3001:

docker compose up --build

This starts containers but does not establish a complete deployment design or secure configuration policy. Restrict the WebSocket service and X32 network access appropriately for the environment. Do not treat generic static-host deployment as sufficient: the separate OSC bridge and mixer network configuration are required.

Repository layout

src/app/ — Next.js UI, configuration API, and browser WebSocket manager.
src/OSCWebServer/server.js — Node WebSocket-to-OSC bridge.
config.sample.json — example mixer inputs, bus controls, and WebSocket configuration.
docker-compose.yml, Dockerfile.nextjs, Dockerfile.server — two-service container setup.
package.json — npm scripts and dependencies.