Overlay Designer
Eranio Published on: 13. October 2026
Overlay Designer (Beta)
The Overlay Designer is the free-form editor for your stream overlays. You can create your own canvases, place widgets with your mouse, resize them, fill them with content, and get a dedicated OBS link for each canvas. Menu: Overlay → Designer (Beta).
The editor deliberately carries the "Beta" label: it is still under active development, so bugs or small changes can still occur occasionally. You can already use it for your real stream regardless.
This guide describes the editor itself (canvases, tools, operation). Dedicated guides for each individual widget type follow in a later round.
Canvas overview
Opening Overlay → Designer (Beta) shows you a list of all your canvases (overlays). You can create as many as you like, for example one for your regular stream and a second one for special events.
| Column | Meaning |
|---|---|
| Name | The name you gave the canvas. |
| Widgets | How many widgets are currently placed on this canvas. |
| Created at | When it was created. |
The New overlay button creates another canvas. You give it a name (default: "My overlay") and land directly in that new canvas's editor afterwards.
Each row offers these actions:
| Action | What happens |
|---|---|
| Edit | Opens the editor for this canvas. |
| Overlay link | Opens this canvas's OBS link in a new tab (for checking, not for embedding). |
| Duplicate | Creates an independent copy with all widgets. You can experiment freely in the copy without changing the original. The copy gets its own, new link. |
| Rename | Changes only the canvas's name. |
| Delete | Permanently removes the canvas with all its widgets. |
The editor
Clicking Edit opens the actual editor. It is split into three areas:
- Left: Add widget (top) and Layers (bottom), two independently scrolling lists.
- Center: the canvas itself, shown at your overlay's true resolution, scaled down to fit.
- Right: the properties of the currently selected widget.
On narrow screens (phone/tablet) these three areas collapse into tabs: Layers, Add widget, Canvas, Properties.
Top toolbar
| Element | What it does |
|---|---|
| Resolution (dropdown) | Picks a fixed resolution (720p, 980p, 1080p, 1440p, 4K) or "Manual..." for a free width/height (160 to 7680 pixels wide, 90 to 4320 pixels tall). |
| Undo / Redo | Undoes or redoes the last changes (also via keyboard shortcut, see below). |
| Duplicate | Duplicates the currently selected widget. |
| Show grid | Toggles a helper grid over the canvas. |
| Snap to grid | Toggles snapping widgets to the grid while moving/resizing. |
| Grid size | Spacing of the grid lines in pixels (20, 40, 60, or 80 px). |
| Event sounds | Opens the management of sounds this overlay plays on certain events. |
| Reset all goals, timers and counters | Resets every running progress (goals, timers, counters) of all live widgets on this canvas back to its starting value. |
| Media Library | Opens this canvas's media library (see below). |
| Widget help | Opens a short description of every existing widget type. |
| Overlay link (eye icon) | Shows or hides the link for OBS. |
| Copy link | Copies the currently shown link to the clipboard. |
| Regenerate link (circular arrow) | Generates a new, random link for this canvas. The old link stops working afterwards, you'll need to update the browser source in OBS. |
Below that is a notice that the editor is in beta.
Add widget
The top-left area lists every available widget type, grouped by category. A click adds the widget at its default size and position on the canvas. TikTok: planned and in progress.
Layers
Below that, the layer list shows every widget on this canvas, topmost layer first. For each row you can:
- click the name to select the widget on the canvas,
- drag the handle to reorder it (and thereby change the stacking order),
- toggle the widget's visibility via the eye icon,
- lock the widget against accidental moving/resizing via the lock icon.
The canvas
In the center you see the canvas at true proportions, just scaled down to fit your screen. A button in the top-right corner of the canvas switches to fullscreen mode.
Selecting, moving, resizing widgets:
- Clicking a widget selects it (its properties appear on the right).
- Dragging moves the widget.
- Dragging the corner handles changes its width and height.
- With "Snap to grid" enabled, a widget automatically jumps to the nearest grid line, or to the canvas's edge or center, while moving/resizing (snap guide lines are shown while this happens).
- A locked widget cannot be moved, resized, or rotated.
Right-click menu: Right-clicking a widget opens a context menu with these quick actions:
| Action | Effect |
|---|---|
| Center horizontally / Center vertically / Center both | Centers the widget on the canvas. |
| Fill width / Fill height / Fill stage | Stretches the widget across the full width, height, or the entire canvas. |
| Align left / right / top / bottom | Moves the widget to the respective edge. |
| Bring forward / Send backward | Moves the widget one position in the stacking order. |
| Duplicate | Creates a copy, slightly offset. |
| Lock / Unlock | See above. |
| Hide | Turns off visibility. |
| Delete | Permanently removes the widget (with a confirmation for important types). |
The same quick actions (except delete/lock/hide) are also available directly in the properties panel of a selected widget.
Keyboard shortcuts (when no text field is focused):
| Shortcut | Effect |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Y (or Ctrl+Shift+Z) | Redo |
| Ctrl+D | Duplicate the selected widget |
| Delete or Backspace | Delete the selected widget |
| Esc | Closes an open menu, or leaves free text-position mode |
Undo/redo remembers the latest changes from this session (up to 100 steps back).
Properties
With a widget selected, the right-hand area shows all of its settings. Which fields appear exactly depends on the widget type. With nothing selected, it shows a hint to click a widget on the canvas or in the layer list first.
Appearance (shared by all widgets)
Many widgets share common styling options in the properties panel, for example font, font size, colors, border, background opacity, or the choice between bar/circle/percentage display for progress widgets.
Media Library
The Media Library button in the toolbar opens an overview of your uploaded images, videos and audio files. There you can:
- upload files or whole folders by drag and drop, or via the Choose files / Choose folder buttons,
- filter by images, videos, audio, or the built-in standard files,
- view a file enlarged,
- delete a file.
The media library is shared between the Overlay Designer and the older Overlay Alerts system. Details on file types, limits, and the storage quota are in the Media library guide.
Test area
At the bottom of the editor there's a collapsible test area. Grouped by category, it shows test buttons for every widget actually present on the current canvas:
- Events: fires a sample alert (follower, subscriber, tip, cheer, raid, bot message, and, if present, Ko-fi membership/shop).
- Other: Hype Train, TTS, and ads.
- Effects: all other live widgets (counters, goals, timers, and so on).
- Minigames: one of the placed minigame widgets.
Clicking a button plays the animation directly on the canvas in the editor, and additionally sends a real test event to your overlay link so you can check it in OBS too. If a matching widget doesn't exist yet on the canvas, its test button is not shown.
Saving and changing the overlay link
Every canvas has its own secret link. You enter this link as a browser source in OBS (see the Add the overlay to OBS guide). Treat it like a password: anyone who has it can send test events into your overlay through it. Don't share it publicly.
Regenerate link generates a new link at any time. The old link stops working afterwards, you'll need to update the browser source in OBS with the new link.
Saving
Every change (moving a widget, changing a setting, adding or deleting a widget) is saved automatically and immediately, there is no separate save button. If the overlay is already embedded as a browser source in OBS, it reloads itself after a change (with a short delay, so several quick changes don't cause multiple reloads, and a currently running alert can finish playing first).
FAQ
How many overlays can I create? There is no fixed limit. For example, you could create one overlay for your regular stream and a second one for a special event, and switch between the matching browser sources in OBS.
I accidentally deleted a widget. Can I undo that? Yes, as long as you haven't reloaded the page, Ctrl+Z (Undo) also works for a deletion.
Why is the editor marked "Beta"? It is still under active development. The features that already exist work reliably, but small changes or occasional bugs can still happen.
What's the difference between "Hide" (eye icon) and "Delete"? Hide keeps the widget, it just isn't shown in the overlay. Delete removes it permanently.
I can't find the link for OBS anymore. Open the canvas in the editor and click the eye icon next to "Overlay link" at the top, the link will be shown and you can copy it.
Does every canvas show all widgets? No, each canvas has its own widgets. A widget you add on canvas A does not automatically appear on canvas B.