How to add a topic bar to OBS

Launch Topic Bar and copy your overlay URL

Sign in and click LAUNCH on the Topic Bar tile in your dashboard, then hit COPY next to the overlay URL at the top of the settings page. It looks like streamslayers.com/topicbar/your-user-id and it never changes — one URL for every show you ever build.

⛶ Click to enlarge

Add it to OBS as a full-screen browser source

1. Sources → + → Browser, name it "Topic Bar".
2. Paste the URL.
3. Set width 1920 and height 1080, then OK.

Use the full canvas even though the bar is only ~90 px tall. The bar pins itself to whichever edge you pick, and the media reveal needs room to open outward from it — a source cropped to bar height would clip every reveal. Everything outside the bar and the open reveal stays transparent, so drop the source at the top of your scene and leave it there.

From here on, nothing you change requires touching OBS again. Settings reach the overlay instantly over a WebSocket connection — no browser-source refresh, no cache-busting, no "why is it still showing the old topic".

Shape the bar: edge, height, reveal size

Open the Bar Settings tab. Four controls decide the whole silhouette:

• Show Topic Bar — the master switch. Off hides the bar and every reveal without deleting anything, which is what you want between segments or during a full-screen replay.
• Bar Edge — TOP makes it an upper-third bar and reveals open downward; BOTTOM makes it a lower-third bar and reveals open upward. Bottom is the default and the safer pick if you run chat or a face cam in the upper corners; top keeps the lower third free for name plates.
• Bar Height — 64 to 160 px, resets to 96. Below ~80 px two-line topic titles start to feel cramped; 90–110 px is the sweet spot for a four-to-six topic rundown.
• Media Reveal Height — 180 to 520 px, resets to 320. This is the single most consequential slider in the app: the panel's padding, its subtitle size and its media frame all scale off it. A 200 px reveal reads as a caption strip; a 450 px reveal reads as a full graphic package.

Show LIVE Badge adds a block at the left end of the bar, filled with your accent color, carrying a pulsing white dot and the word LIVE in black — useful on a debate show, redundant if you already have a LIVE bug elsewhere in the scene.

⛶ Click to enlarge

Brand the corners with badges

The CORNER BADGES card gives you two independent blocks that bookend the topics: Left Badge — Channel and Right Badge — Sponsor. Each takes an uploaded logo plus Text Segments, and each segment has its own color — so "STREAM" can be white and "SLAYERS" your brand cyan in the same badge. Segments render with no automatic gap, so include a trailing space in the text if you want one.

— Inline lays the segments side by side; ⫶ Stack puts them on two lines, which is how you fit a long channel name into a narrow badge. Logo Position flips the image to the left or right of the text.

Each badge gets its own Animation — None, Pulse (a subtle breathe) or 3D Flip (a Y-axis rotation) — with an Every … SEC interval from 0.5 to 120 seconds. Pulse defaults to 2.6 s, 3D Flip to 7 s. The settings are per-badge for a reason: a sponsor block flipping once a minute reads as paid placement, the same block flipping every 7 seconds reads as a distraction.

Build the rundown — up to 8 topics

Switch to the Topics tab. The cap is 8 topics, and that is a design limit, not an arbitrary one: the cells split the bar width evenly, so nine short segments would leave each one too narrow to read at broadcast distance. Four to six is where the bar looks best.

• Title — what shows in the cell. Press Enter for a line break, e.g. LAKERS / ROCKETS or SPRING TRAINING / UPDATES. The cell clamps at two lines and it's rendered in caps, so write short.
• Subtitle — the body copy inside the reveal, hard-capped at 240 characters with a live counter that turns orange past 200. Past 240 the text overflows the panel even at maximum reveal height, which is why the field simply stops you.
• Show Reveal — turn it off and this topic never expands. It just sits in the bar as a marker. Perfect for a "COMING UP" or "OPEN PHONES" segment with nothing to show.
• Expand For (sec) — auto-collapses the reveal after N seconds while the topic stays highlighted in the bar. Set 8–12 for a photo you want to flash and clear; leave it at 0 to hold the panel open for the whole segment.

Under Media (optional) there are four rows — Image, GIF, Video, Sound — and each row takes either an Upload or a pasted URL. The three visual rows are mutually exclusive: setting one clears the others, so you can never end up with a stale image fighting a new clip. Sound is independent and fires alongside whatever visual is set, which is how you get a stinger under a topic change.

The Video row accepts an MP4 or WebM URL or a YouTube link — paste a watch URL and it converts to an embed automatically, muted and looping by default. Media renders in a 16:9 frame floated to the right of the panel at up to 45% of its width, with your subtitle wrapping around it. Uploads are capped at 4 MB per file; anything bigger, host it and paste the URL instead.

Click ADD TOPIC and it drops into the list below, where ↑ ↓ reorder the rundown, Edit reopens the form, and Highlight puts it on air right now.

⛶ Click to enlarge

Attach Graphics that fire on their own

This is the part most people miss. Every topic has an Auto-Graphics block that links real graphics from the Graphics app to that segment. Click + Add graphic and you get three fields: a dropdown of every graphic you've built, Delay (s) — how long after the topic goes live before it animates in — and For (s) — how long it stays, where 0 means until you switch topics.

Add as many as the segment needs. A postgame topic might run a matchup title at 0 s for 8 s, a player stat card at 12 s for 10 s, and a sponsor plate at 40 s for 15 s — you highlight the topic once and the rest of the segment stages itself while you talk.

Two details worth knowing. First, these drive the real on-air state of the Graphics app, not a private copy — so the graphic appears in your Graphics browser source at the position you designed it, and your Graphics Stream Deck keys or Command Center buttons can still hide it manually. Second, if two consecutive topics share the same graphic, it stays on screen through the switch instead of flickering off and re-animating.

If the block reads "No graphics built yet" instead of offering a dropdown, go build one in the Graphics app first — the two apps are separate browser sources, and the Topic Bar only ever points at graphics you already own.

⛶ Click to enlarge

Build a rundown from live headlines

Below the topic form, IMPORT FROM HEADLINES turns live sports wire copy straight into topics. Toggle the league chips — MLB, NBA, NFL and NHL are on by default, with 20 leagues available including WNBA, NCAAF, NCAAB, MLS, Premier League, Champions League, UFC, F1, PGA, NASCAR and more — then hit Load headlines.

Each result shows a thumbnail, the headline, a summary and how long ago it published. Click Add and it becomes a topic: headline as the title, summary as the subtitle, wire photo as the reveal image. Anything already in your list shows ✓ Added. Fill the bar with tonight's stories in seconds, then edit the titles down to something short enough for a cell.

Color it, then save the whole show as a profile

The Appearance tab is four colors and two sizes. There is no theme picker here on purpose — the bar has one strong look (angled cells, heavy black keylines, a halftone tile texture) and your colors drive it. Background tints the inactive cells, Text sets the resting title color, Accent is what the live cell fills with, and Highlight Color (overrides accent) is exactly that — leave it empty and the accent drives everything; fill it in and it takes over every accented element at once: the live cell, the LIVE badge, the reveal's thin accent rail and the countdown digits. Topic Title Size (14–28 px) sets the type in the bar cells, and the live cell renders 2 px larger than the rest. Subtitle Size (10–22 px) is only a baseline — the reveal scales it up in proportion to your reveal height. The reveal itself never repeats the title; it's already in the cell right above (or below) it.

Then use SHOW PROFILES at the top of the page. Hit + Save As New and the entire bar — topics, attached graphics, badges, colors, edge, heights — is captured under a name. Build "Yankees Postgame", "NBA Debate" and "Friday Mailbag" once, then Load the right one before each show and the bar reconfigures in a click.

Double-click a profile name to rename it. Overwrite updates the loaded profile in place after you tweak it. Profiles live in your browser, so use ↓ Export to pull them all down as a JSON file and ↑ Import to load them on another machine — that's also your backup if you ever clear site data. ↺ Reset wipes the current bar back to defaults without touching your saved profiles.

Run the show

On air, the only move is Highlight. Click it on a topic and that cell fills with your accent color, the reveal opens outward from it — upward on a bottom bar, downward on a top bar — any attached audio plays, and the Auto-Graphics timers start. Click Live on the same topic to clear it, or highlight a different one to move on.

The field labelled Auto-Advance (sec) is a segment clock, not an autopilot. Set 300 on a topic and the live cell grows a striped progress bar, a NEXT countdown appears at the right end of the bar, and a short buzzer sounds when it hits zero. The bar does not jump to the next topic by itself — the clock tells you and your audience that a segment is running long; you still make the call.

You don't need this page open to run the show. The Command Center gives you the whole app as a board — Show / Hide, Prev, Next (both wrap around the rundown), Reveal / Collapse to force the media panel shut mid-segment, a top/bottom edge selector, and a button per topic. The same commands map to physical keys through the StreamSlayers Stream Deck plugin (v1.18.0), so a producer can drive the rundown from hardware while you talk.

⛶ Click to enlarge