Skip to Content
GuidesDesign your overlay

Design your overlay

Your overlay is what viewers see on stream: the vertical (9:16) canvas that sits over your camera. You design it by placing widgets on a grid, and a live preview shows you exactly how it will look on air. What you build here is what OBS renders, pixel for pixel.

You design an overlay inside a break template: in the studio, open Break Templates, create or edit a template, and you land on the Overlay tab. The editor has three columns: the widget list on the left, the live preview in the middle, and the settings for the selected widget on the right.

The grid

The overlay is a portrait grid, the same shape as your stream. You work top to bottom, the way your viewers watch. Anything you place snaps to the grid, and alignment guides appear while you drag so widgets line up cleanly without fiddling.

Two rules keep layouts sane:

  • Widgets never overlap. Each widget owns its spot on the grid. If there is no room for another one, the editor tells you to remove or resize something first.
  • Plans set a widget cap. The free trial fits 4 widgets on the overlay at once; paid plans have no cap. See Pricing and plans.

Because the overlay is transparent, everything you do not cover stays open for your camera. A common layout keeps your face in the middle and puts the board, your name plate, and socials around the edges.

Add and arrange widgets

Drag a widget from the Available Widgets list onto the canvas. Each widget is one element: the fill board, a scoreboard, your name plate, your socials, an image, or text. See the full list in the widget catalog.

For each widget you can:

  • Place it. Drag it where you want on the grid.
  • Size it. Drag its corners to make it bigger or smaller. Each widget has a sensible minimum and maximum, so it never shrinks past the point where it reads or grows beyond the overlay.
  • Style it. Click it to open its settings and set its colors, background, border, motion, and more. Every option is covered in Customizing widgets.
  • Lock it. Lock a widget once it is where you want it, so you cannot nudge or resize it by accident while arranging the rest.
  • Remove it. The trash button in the settings panel takes it off the overlay.

Watch the live preview

As you arrange, the center Preview Overlay renders the overlay exactly as OBS will draw it. What you see in the preview is what your viewers see, so you can dial in spacing and color before you ever go live. There is no separate “publish and hope” step.

One exception worth knowing: the score widgets (Team Score, League Scores) show sample data in the preview. Real live scores appear on the OBS overlay once your break is live.

Save it as a template

Your overlay design is saved as part of its break template, which bundles it with your on-air controls. Next time you start a break you pick the template and you are ready. Build a few for the different kinds of breaks you run.

Next

Last updated on
Break templatesCustomizing widgets