Overlays

Scene editor: one single URL for OBS

Compose several overlays on one canvas, place them by hand, and walk away with a single browser source.

Without scenes, every overlay is its own Browser Source in OBS and placing them is an exercise in patience. The scene editor gives you a canvas the size of your stream, a widget palette on the left, and one URL at the end: you build inside it, and OBS loads a single source. Drag a layer in the editor and it moves live on stream.

Everything it can do

  • Canvases for vertical, landscape, square and ultrawide, or a custom size.
  • A palette with every overlay as a widget, plus reference frames and design layers.
  • Native design layers: text, image and shapes, with gradients, stroke, plate and animations.
  • Fine placement: align, distribute, center, hug the content, fill the canvas, lock and hide.
  • A configurable safe area, with presets for phones and for the TikTok LIVE interface.
  • Three preview modes: placeholders, sample data and live data.
  • Stream event simulation to see how several widgets behave together.
  • Look shared with the original overlay, or detached for that layer only.
  • Export the scene to PNG or GIF, with or without a transparent background.
  • Undo and redo, duplicate the scene, and duplicate it into another format.

Shared or this layer only

Each widget can follow its overlay's settings — so the same piece looks identical in every scene and in its standalone URL — or detach and carry its own look. It's the decision you'll thank yourself for three months later: if you want to recolor your ranking everywhere at once, keep it shared; if this particular scene needs something else, detach it.

Placeholders, sample or live

Placeholders cost nothing and are enough for placing things. Sample data shows the widgets FULL, which is what you need when you build off-air: an empty ranking doesn't take the same room as one with ten rows. Live data is exactly what's going out right now.

The safe area isn't decoration

In vertical, phones don't show the whole canvas: rounded corners eat the sides and the platform's interface covers the top and bottom. The safe area marks the rectangle that's reliably visible, with presets for phones and for TikTok LIVE. It's an editor guide only: it's never painted in OBS.

What's expensive

Some widgets run real simulations — the jar, the gift rain — and some design layers animate on a loop. A source that never stops keeps pushing frames to OBS for the whole stream. The editor tells you how many layers are simulating and lets you freeze them while you build.

Step by step

  1. Open Scenes from the menu, On-screen section, and create a scene.
  2. Pick the canvas format and the platform it's aimed at.
  3. Drag widgets from the palette onto the canvas, or double-click to drop them in the center.
  4. Place them with the alignment tools and turn on the safe area if it's vertical.
  5. Switch the preview to sample data and simulate events to see how it behaves when full.
  6. Copy the scene URL and set it as the single browser source in OBS.

FAQ

Does it replace each overlay's standalone URL?

It doesn't replace them: they coexist. You can keep a scene for the fixed pieces and still add standalone overlays alongside; widgets with a shared look are identical in both places.

I added the same overlay twice and it animates twice

That's expected: a second copy of the same overlay animates the same event twice. The app warns you when you drop it. If you wanted two different views, use a widget that takes parameters (two goals, or two activity labels, for example).

Why is it marked beta?

Because it's going to keep moving and changing shape. What already works is the important part: the single URL holds up live. But it's a young feature and rough edges are expected.

Try it on your next stream

OverInteractive is free to start. Download the app, connect your platform, and your audience is interacting within five minutes.

Download for Windows