Stream Studio · learn by doing

Your first overlay.
Then your whole stream.

Never added a widget before? You're in the right place. Build one working scene, learn what each widget means, and add the pieces that suit your stream.

Start the crash course

Five short lessons · follow at your own pace · no account needed to learn

The first-stream recipe

Three widgets. One clear story.

Who am I facing?
Opponent identity
How did that go?
Match result
How's the session going?
Session record

Start with the All-in-one source and enable just these three. You can grow the scene later.

The first-scene crash course

From download to “I’m live.”

Five short lessons, a small task in each, and a clear check before you move on. Jump to any lesson and come back when you need it.

0 of 5 lessons complete.

Your place and checklist are saved in this browser. Mark a lesson complete when you have tried it.

Lesson 1 / 5 · 2 min

Connect the dots

Understand how a game on your PC becomes a widget on your stream.

The agent reads your game
The desktop agent runs on the Windows PC where you play StarCraft II. It sends live game information and uploads completed replays to your SC2 Tools account.
Your account supplies the information
Pairing connects that PC to your account. Your replay history adds context, such as previous meetings with an opponent. A new opponent may have little history; that is normal.
A Browser Source displays it
In Settings → Overlay, your personal overlay URLs open transparent web pages. OBS Studio or Streamlabs displays those pages as Browser Sources above your gameplay. The URL connects the source to your account; keep it private, like a stream key.

Try it now

Trace this route once: StarCraft II → desktop agent → your account → overlay URL → OBS Browser Source. Which part collects information, and which part puts it on screen?

Find your overlay URLs

I tried this lesson and checked the result

Pick a starting point

A small setup you can make your own.

These are suggested combinations, not automatic presets. Open any widget's guide, then enable and test it in Settings.

Your first stream

A clean scoreboard and context for every game.

Session record
Keep the day's story on screen.
Opponent identity
Introduce who you're facing.
Match result
Let viewers catch the outcome.

A practice night

Make the plan visible, then put it into practice.

Ghost Build coach
Follow the next steps of your chosen build.
Build randomizer
Choose an opening from your own pool.
Scouting tells
Learn what to watch for from the opponent.

A community night

Bring the conversation into the broadcast.

Multi-platform chat
Show the conversation in one place.
Chat highlight
Put a great question on screen.
Chat poll
Give viewers a decision to make.

The field guide

What it shows, what makes it appear, and how to get it into your scene. Start with one; add more when you need them.

31 widgets explained

Search the widget guide

Opponent identity

A quick introduction to the player on the other side of the match.

All-in-one or its own Browser Source

Example · Opponent identityIllustrative data

SC2 Tools

Opponent identity · illustrative

ExampleOpponent · Terran · 4,200 MMR

Head-to-head: 3 wins, 2 losses

A reading example, not a live preview. Use this widget's setup and test steps below to see its actual design in OBS.

What you're looking at

The dossier shows the opponent's name and race, with MMR and head-to-head context when available. Head-to-head means your recorded wins and losses against that opponent. Live identity can arrive before the completed replay; profile lookups and past games add detail as it becomes available.

When it appears

During the active match when the agent identifies the opponent; clears after the match instead of staying on the next queue.

Have these ready

A paired desktop agent running while you play StarCraft II.
Opponent identification; profile and head-to-head details depend on available data.

Set it up

Open Settings → Overlay and enable Opponent identity in OBS Browser Source URLs.
Use Copy beside Opponent identity to copy its widget URL.
In OBS, add a Browser Source, paste the copied URL, and position it in your scene.
Keep that source loaded, then press Test beside Opponent identity in Settings.

Open the right settings

Your first successful test

Test displays sample identity data. Then start a real match with the agent running to verify the opponent's identity comes through.

Give it room

A small corner card works well. Keep it clear of the minimap, resources, and unit selection.

If nothing appears

A first meeting can have no head-to-head history, and a profile lookup can be unavailable. If no live identity appears at all, check the agent pairing and the overlay connection in Settings.

Pairs well with

Get unstuck

Start with what you can see.

A quiet widget is sometimes waiting for its event. These checks help you tell the difference.

Test works, but a real game shows nothing

The test uses sample data; it confirms the Browser Source can display the widget. Check Devices for a paired, recently seen agent on your gaming PC and keep it running. Live widgets need a detected match; result widgets need the completed replay to finish syncing. Opponent-history cards also need usable history. Browser-only replay analysis does not replace the agent's live connection.

Check my agent

Nothing appears, even when I press Test

Open the right scene and make the Browser Source visible. Put it above the game capture in the Sources list, check that you copied this widget's URL, and enable the widget in Settings. Chat, studio widgets and Ghost Build use their own Browser Sources. Build profile has no Test button: save all five ratings, then use Show widget. Follow the individual guide for widgets controlled from the Stream Dock.

Check Overlay settings

The card disappears, or only some cards appear

Many widgets are brief announcements, so they clear after their event. Session record and practice HUDs behave differently. A rematch, streak or cheese alert only appears when its conditions are met; an empty history card can mean there is not enough data. Read 'When it appears' in the widget guide before treating a quiet source as a failure.

Find the widget's trigger

The widget is cut off or far too large

Browser Source width and height set the page's drawing area. Change those in source properties before resizing the source on your scene. Start a landscape All-in-one source at your canvas size, for example 1920 × 1080. For individual sources, leave enough room around the card; Build profile uses 720 × 900. Use the overlay appearance controls for text and panel size, then copy the updated URL when the theme is part of it.

Adjust appearance

I hear the same voice or alert twice

Look for two active sources playing the same feature, especially All-in-one plus a separate widget. Keep one audible copy. The Stream Dock is a control panel, not an on-stream Browser Source. For scouting speech, choose your voice and event preferences in Voice settings, and use OBS's Interact window if the browser asks for a click to enable sound.

Open Voice settings

Chat is empty, or an alert isn't arriving

Check your platform identifiers in Multi-platform chat and whether that channel is live. A sample chat test verifies layout, not a real platform connection. Event alerts also depend on the platform's available event connection and permissions; connecting chat alone does not guarantee every subscription, raid or gift event. Open the Stream Dock to inspect the feed and configuration.

Review chat setup

Jargon, translated

Widget: One piece of information or one on-stream feature, such as a scoreboard or a poll.
Browser Source: A web page OBS or Streamlabs draws on top of your scene. You paste your widget URL into it.
Overlay URL: Your private link to a widget. It gives the source access to your overlay; keep it out of public chat and screenshots.
Paired agent: The desktop app linked to your SC2 Tools account. It sends game information from the PC where you play.
Stream Dock: Your backstage control panel for polls, highlights and scenes. Open it separately; viewers see the widgets it controls.
Event widget: A card that waits for something to happen, shows briefly, then clears. It doesn't need to stay visible to be working.

For the streaming app itself: OBS Browser Source reference · Streamlabs Browser Source walkthrough.

Make your first source work.

Then come back here for the next piece. Your course progress stays in this browser.

Go to Overlay settings