# Arrange your overlay

Build one overlay out of several pieces — a chat box, a goal bar, a counter — and put each of them where you want it.

Updated 23 September 2026

## Before you start

You need a widget. [Add a widget to OBS](https://bloopbot.com/docs/widgets-in-obs) takes you from the New widget dialog to a Browser Source; everything below happens in that widget’s editor. A widget is one overlay, and what you arrange is its layers.

## 1. A widget is a surface of layers

Every widget is made of layers. A layer has its own type, its own place on the 1920 × 1080 canvas, its own width and — if you want — its own look. The **Layers** tab on the left lists the whole overlay, and the top of the list draws on top: drag a row, or use its up and down arrows, to change which layer covers which.

A widget starts with whatever you gave it under **Start with** when you made it: a layer of that type, or nothing at all. An empty surface is a real starting point, not a broken one — the Layers tab says **Nothing is placed on this overlay yet**, and **Add a layer** under the list opens the **Add** tab (step 3), where the first layer comes from.

![The Layers tab of an overlay with four layers, top of the list first: Media, Chat (Chat box), Raid alert (Alert · raid) and Follow alert (Alert · follow), the selected row showing move up, move down and hide buttons, then “Top of the list draws on top. Drag to reorder.” and Add a layer.](https://bloopbot.com/docs/screenshots/widget-surface-layers.jpg)

_The Layers tab: one row per layer, each showing its type, the top of the list drawing on top._

## 2. Move and size a layer

1. Click a layer on the canvas to select it. Its name and its handles appear over it, with a small toolbar underneath: **Duplicate**, **Hide** and **Remove…**, and on an alert or Media layer **Test**, which plays it on the canvas only.
2. Drag it where you want it. The box follows your pointer, and the layer lines up with the middle of the canvas when you get close.
3. Drag the handle on its right edge to change its width.
4. Nudge a selected layer with the arrow keys — one pixel at a time, or ten with **Shift** held.
5. Changed your mind? **Undo** steps back through your changes and **Redo** puts them back.
6. You do not need to save: each change goes into your draft about a second after you make it, and the chip in the top bar counts it — **1 change · draft saved**. OBS keeps showing the version it already has until you press **Publish** (step 5).

Alert layers move and size the same way. To put one alert big in the middle of one overlay and small in a corner of another, see [Show alerts on stream](https://bloopbot.com/docs/alerts).

![The canvas of an overlay drawn over a sample game backdrop: a follow alert reading “Ada just followed” inside its layer at the top right, and the selected chat layer at the bottom left with a chat line from PixelPal, carrying its name as a filled blue pill, its outline and corner handles, and a toolbar under it with Duplicate, Hide and Remove…; nothing else on the canvas has a box around it.](https://bloopbot.com/docs/screenshots/widget-surface-canvas.jpg)

_Several layers on one canvas: each draws its own kind’s content, and the selected layer shows its outline and resize handle._

## 3. Mix the types you want

One overlay can hold pieces of different types — a goal bar along the bottom, a chat box in the corner, a counter in the other — instead of one Browser Source for each. They all come from the **Add** tab:

1. Choose **Add** at the top of the left panel, beside **Layers** and **Media**. Its cards are grouped as **Alerts**, **Media**, **Chat & info** and **Goals & games**, and **Search layers** narrows them down.
2. Drag a card onto the canvas: the layer lands where you drop it, at that type’s usual size.
3. Or click the card, which puts the layer in the middle of the canvas. Either way the new layer is selected and the left panel switches back to **Layers**.
4. Give it a name you will recognise: the name at the top of the settings panel on the right is where you type it. To take a layer off screen without losing it, press the eye beside its row, or **Hide** on the toolbar under it.

![The Add tab: a Search layers box, then the Alerts group, one card per alert type with a drawn preview — Follow alert and Raid alert marked On this overlay, Sub, Resub, Gift sub, Cheer, Redemption and Custom alert — and the Media group starting below.](https://bloopbot.com/docs/screenshots/widget-surface-drawer.jpg)

_The Add tab: every type as a card, alerts first, each one draggable onto the canvas or added in the middle with a click._

A widget holds up to 24 layers — when it is full the Add tab says **This overlay holds as many layers as it can** — and every type is offered on every widget: two counters, or two chat boxes, are simply two pieces of the overlay.

Alerts work the same way. Each alert type — **Follow**, **Sub**, **Resub**, **Gift sub**, **Cheer**, **Raid**, **Redemption** and **Custom alert** — is its own layer, and you can place it on any overlay: raids big in the middle of one, follows small in the corner of another. A layer shows one design, and a design belongs to your channel, not to the layer, so a change you make to it from one layer changes it everywhere it is shown. Every alert, and every file a flow plays, waits its turn in one shared queue and plays one at a time, so nothing overlaps or talks over anything else. The **Media** layer is where your **Play media** flows show their images, videos and sounds.

To check a mixed overlay piece by piece before you go live, open **Simulate** in the top bar. Under **Test events** it lists a test for every type on the overlay, grouped by type. They play on the canvas only; tick **Also play on the live overlay in OBS** when you want one to reach your stream, where viewers see it.

## 4. Give one layer its own look

The overlay has one theme: the colours, the font and the rounding that every layer draws with. With no layer selected — or after pressing **Overlay style** in the top bar — the right panel edits it, under **Theme** and **Look**. A single layer can step out of it.

1. Select the layer and scroll its settings down to **Style**. While it follows the overlay, the section says so and names the theme, for example **Follows the overlay’s theme, Studio**.
2. Switch on **Customize this layer**. The layer gets a look of its own, starting from the same starting style as the overlay.
3. Pick a **Starting style** — Studio, Capsule, Scoreboard or Minimal. It applies colours and spacing, and keeps your text, position and custom CSS.
4. Adjust the fonts, colours, panel and spacing underneath. They change this layer only; the others keep the overlay’s theme.
5. Switch **Customize this layer** off again and the layer’s own look is removed: it follows the overlay once more, and nothing else changes.

![A layer’s Style section with Customize this layer switched on: the layer’s own starting styles Studio, Capsule (selected), Scoreboard and Minimal, the line “Applies colours and spacing. Keeps your text, position and custom CSS.”, then Fallback font, Google Font and Weight.](https://bloopbot.com/docs/screenshots/widget-surface-design.jpg)

_A layer’s Style section with Customize this layer on, and a starting style of its own chosen._

## 5. Publish your changes

Nothing you do in the editor reaches your stream on its own. Each change saves to your channel’s **draft** about a second after you make it, and OBS keeps showing what you last published until you press **Publish**. The draft holds every overlay on your channel and your alert designs, so changes made on different overlays wait together and go live together. The one thing that saves straight away is the overlay’s name.

The chip in the top bar says where you are: **Saving…** while a change is on its way, **3 changes · draft saved** once it is in the draft, and **Live in OBS** when there is nothing waiting.

1. Make your changes. You can close the tab once the chip says **draft saved** — they are still there when you come back.
2. Click the chip to open **Waiting to publish**: every change by name, such as “Gameplay: moved Raid alert”.
3. Press **Publish**, in the top bar or in that list. The editor says **Published — OBS updates now**, and the chip goes back to **Live in OBS**. Only the overlays you changed refresh in OBS; the rest are left alone.
4. Changed your mind instead? **Discard changes…** in the same list asks first, then throws away every change since the last publish, on every overlay.

**History**, in the top bar, lists every publish as a version: newest first, the one on stream marked **Live**, each with the changes it made. **Preview** shows a version on the canvas without changing anything; **Back to draft** returns to your edits. **Restore to draft** puts that whole version back in your draft, and **Restore only** followed by the overlay’s name brings back just the overlay you are editing. Restoring never changes your stream by itself — look it over, then publish. If one of your alert flows plays a design the restored version does not have, the editor names that flow so you can point it at another design.

Editing in two tabs, or on two computers? If the other one saved the draft first, a banner across the canvas says **Changed in another tab**. **Load theirs** replaces what this tab has with the saved draft; **Keep mine** saves this tab’s changes over it. Until you choose, nothing saves from this tab and Publish waits.

> **Tests on stream play what is published**
>
> The test buttons play on the canvas with your draft. On the live overlay they play your published designs, so an alert design you have only added or changed in your draft can be tested in OBS once you publish it.

## A worked example

A stream overlay in three pieces, on one Browser Source. Open your widget’s editor, then:

1. Choose **Add** and drag the **Goal bar** card to the bottom of the canvas.
2. Drag a **Label** card to the top-left for your death counter.
3. Drag a **Chat** card down the right-hand side.
4. Select the goal bar, switch on **Customize this layer** under **Style** and choose the **Scoreboard** starting style, so it reads as a scoreboard while the counter and the chat box keep the overlay’s theme.
5. Press **Publish** and check the scene in OBS.

The canvas is what the Browser Source shows: three kinds of content in one source, one of them wearing a look of its own.

## What you should see

- Every layer drawing its own kind’s content on the canvas — a chat box showing chat, a goal bar showing progress, a counter showing its number — never a plain box.
- The layer you select carrying its name, its four corner handles and its resize edge, over its own content — and every other layer drawing plainly, with no box around it.
- Each layer where its frame says on the 1920 × 1080 canvas, with the whole surface shown scaled to fit the editor’s canvas card.
- A published change reaching OBS on its own within a few seconds, with nothing to do to the source, and the chip in the top bar reading **Live in OBS**.
- An edit you have not published yet showing on the canvas, but not in OBS, with the chip counting it — for example **2 changes · draft saved**.
- A hidden layer drawing nothing, and coming back when you show it again.
- A test for every type you have placed under **Simulate** → **Test events** in the top bar, drawing on the canvas until you tick **Also play on the live overlay in OBS**.
- An alert layer drawing nothing until an alert plays on it — press **Test** on its toolbar to see it on the canvas, or **Test on stream…** in its panel to play the published design in OBS.

## If something looks wrong

- A layer draws nothing: its row may be marked **hidden**, or its content may only arrive with an event — an alert layer or the Media layer sits empty until something plays on it.
- A banner says **Your old Alert box was retired**: the Alert box is gone and its settings were not carried over. Add an alert layer for each alert type you want from the **Add** tab, then **Publish**; the old box is removed from OBS with that Publish.
- The canvas is ahead of OBS: a change reaches OBS when you press **Publish**, not as you drag. The chip in the top bar says how many changes are waiting.
- The chip reads **Not saved — fix the highlighted fields**: a change was refused. The message sits beside the field, and that change is kept only in this tab until you fix it — it is not in your draft yet.
- Opening another overlay asks **Your last change to … isn’t saved**: that change has not reached your draft. Press **Cancel** to stay and fix it, or **Switch anyway**, knowing it may be lost. A refused change on an overlay you switched away from is listed under the canvas, starting with that overlay’s name.
- The chip reads **Couldn’t save — retrying**: the editor lost its connection. It keeps trying on its own; keep the tab open until the chip says **draft saved** again.
- A banner says **Changed in another tab**: choose **Load theirs** or **Keep mine** (step 5). Nothing saves from this tab until you do.
- A new or changed alert design does not play when you test it in OBS: tests on the live overlay use the published designs. Publish first, then test.
- A card in the **Add** tab does nothing and the tab says **This overlay holds as many layers as it can**: the overlay has its 24 layers. Remove one, or put the new piece on another overlay.
- On a phone, layers cannot be dragged: click a card in **Add** to place it in the middle, and arrange the overlay on a larger screen.
- A layer will not go where you want it: drag it on the canvas, or nudge it with the arrow keys. Its width comes from the handle on its right edge.
- The whole widget is in the wrong place in OBS: that is the source’s position and size in your scene, not the editor. A 1920 × 1080 source is what the editor’s canvas shows.