Single Studio

Two components, one path

A control writes variables.home.score and a graphic reads it. That pairing is the whole model — nothing to declare, no store to configure, and no wiring between the two files.

Nothing to deploy

A studio is static files on GitHub Pages. The operator's board is a custom browser dock, each graphic is a browser source, and there is no backend to run or pay for.

Works when the network does not

A studio is static files, and its state lives on the machine running it. A dropped connection mid-show costs you collaboration, not your graphics.

Numbers that add up

Scores are counters rather than last-write-wins, so two operators both pressing +1 make +2. The alternative is a wrong number on air that nothing reports.

Clocks that agree

A countdown stores the instant it ends, not the seconds left, so every machine derives the same number. Nobody ticks, and nobody drifts.

Collaboration when you want it

Off until somebody pastes a link. Then a producer drives the scores from their own laptop, over a service you own, end-to-end encrypted with a key the service never sees.

Live data, still no backend

OBS scene state, Rocket League scores, Twitch events and Google Sheets arrive as plugins running inside the studio's worker. Each is configured per machine, because the port a game listens on belongs to the computer rather than to the show.

A studio in two files

Both halves name the same path. That is the entire mental model.

jsx

// src/control/Control.jsx — the operator's board, in an OBS dock
import { Field, Panel, Stepper } from '@single-studio/core/control'

export default function Control() {
  return (
    <Panel title="Scores">
      <Field name="home.name" label="Home" />
      <Stepper name="home.score" label="Home score" />
    </Panel>
  )
}

jsx

// src/sources/Scoreboard.jsx — one file per OBS browser source
import { Scene, Variable } from '@single-studio/core/source'

export default function Scoreboard() {
  return (
    <Scene>
      <Variable name="home.name" fallback="Home" />
      <Variable name="home.score" fallback="0" />
    </Scene>
  )
}

Press + on the board and the scoreboard changes. There is no step in between to write.

Start

You do not clone Single Studio. You start from Single-Studio-Template — press Use this template, name your repository, and clone that:

bash

npm install
npm run dev

The board opens at the printed URL. Its header menu lists every graphic's browser-source URL with a copy button — that is what you paste into OBS.

Your studio is your own repository from the first commit. Single Studio is a dependency in it, upgraded with a version bump.

Single StudioBroadcast graphics for OBS