One-Click Add to OBS: Direct Sync Is Live

— Breaker Labs

We've shipped the feature streamers have been asking for since day one: one-click push from the dashboard into OBS Studio. No more copy widget URL → alt-tab to OBS → right-click sources → Add → Browser → paste → set width → set height → click OK. Just click Add to OBS on any Command Center card.

Add to OBS button on a Command Center card

What it actually does

The dashboard talks to OBS Studio over its built-in WebSocket server. When you click the button, it:

  1. Opens a connection to your local OBS (default ws://localhost:4455)
  2. Asks OBS for the list of scenes so you can pick where the widget lands
  3. Creates a Browser Source with the right URL, width, height, FPS (30), and audio settings — all dialed in for you
  4. Drops it into the scene you chose

You're done. The widget is on your scene, live, ready to stream.

Re-syncing keeps your scene the way you set it

Here's the part that took the most thought. If you've already added a widget once and tweaked the position, scaled it down, added a drop shadow filter, or layered it under another source — re-syncing doesn't blow any of that away. We only update the URL, width, height, and FPS settings. Your scene-item placement, transforms, filters, and audio adjustments stay exactly where you put them.

This matters when widget dimensions change or when you upgrade plans — you can re-sync without rebuilding your scene.

One password per session, not per widget

You enter your OBS WebSocket password once when you first connect. From that point on, every other Command Center card in that browser session can sync without re-prompting. Adding 4 widgets to OBS = 4 clicks, not 4 password prompts.

The password lives in a React ref — never written to state, never persisted to localStorage, never sent to our API. When you close the tab, it's gone.

What you still need to do once

This works with OBS 28+ (which has obs-websocket v5 built in). The one-time setup is in OBS itself, not in our dashboard:

  1. In OBS: Tools → WebSocket Server Settings
  2. Check "Enable WebSocket server"
  3. Click "Show Connect Info" and copy the password

That's the entire OBS-side setup. After that, the dashboard handles everything.

We wrote a full step-by-step guide with screenshots: How to set up OBS Direct Sync.

Once it's set up, the widgets just do their thing. Pro takeover animations, team colors, confetti — all of it still fires the moment you confirm a pick. The Direct Sync just gets the widget into OBS faster.

Rangers takeover firing on the Randomizer Wheel widget in OBS

Still works the old way

If you're on OBS 27 or earlier, on a streaming software that isn't OBS (Streamlabs/StreamYard/Restream/etc.), or you just prefer the manual flow — the "OBS Setup" disclosure on each Command Center card still shows the widget URL and dimensions for copy-paste. Direct Sync is the new path; manual is the fallback.

Try it

This is live for everyone right now. Head to the Stream Command Center — you'll see a gold "Add to OBS" button next to each card's OBS Setup toggle. Click it once and tell us how it goes.