The editor
PremiumStudio → Overlays → The editor35 settings8 min read
The editor is a design canvas the exact size of your overlay. On the left you add things and see the layer list, in the middle is the canvas, on the right the inspector for whatever is selected. The canvas renders the overlay with the same code as OBS, so it's a true preview. Everything is saved as a draft automatically.
How it works#
- The canvas is a real render: alerts animate, chat scrolls and goals fill exactly as in OBS.
- Click a layer to select it. Drag to move, drag a corner to resize, drag the round handle to rotate. Shift keeps the aspect ratio while resizing and rotates in 15° steps.
- Drag on an empty part of the canvas to box-select several layers. Shift/Ctrl-click adds or removes layers from the selection.
- Layers snap to the canvas edges and center, to other layers' edges and centers, and to your ruler guides (within 6 px).
- Two modes: Design (Figma-like: add panel, layers, inspector) and Scenes & sources (OBS-like docks). Same overlay, same draft — only the layout differs. Your choice is remembered.
- Several people can edit at once: you see who's here (avatars), their cursors, and which layers they have selected — a layer someone else is editing is marked with their name.
Before you start#
An overlay to edit — create one on the Overlays tab.
Set it up#
Part 1Find your way around5 steps
Open the editor
On the Overlays tab, click an overlay's thumbnail or its Edit button.
Pick a size
In the top bar, the format menu shows e.g. 16:9 · 1920×1080. Change it to 9:16, 1:1, 720p or Custom size… (320–3840 × 240–2160).
Turn on helpers
Click the grid icon for a grid, the scan icon for safe zones, and the ruler icon (Shift+R) for rulers.
Choose preview data
Switch between Test data (a believable fake stream) and Live data (your real latest events and chat).
Zoom
Click the percentage to fit the canvas to the window; −/+ zoom out/in, or Ctrl + scroll.
The top bar shows Draft saved after every change.
Every setting explained#
Top bar — left to right
| ← Back | Back to the overlays overview. Nothing is lost: everything is saved as a draft. |
| Overlay name | Click to rename (max 60 characters). Saved automatically. |
| Draft / Published · vN | Draft (amber) means there are changes OBS doesn't show yet. Published · v4 means OBS shows exactly this. |
| Save status | Saving…, Draft saved, or Not saved (red — hover for the reason; usually a lost connection. Your changes are retried). |
| Design / Scenes & sources | Switch editor mode. Design = add panel + layers + inspector. Scenes & sources = OBS-style docks: Scenes, Sources, My uploads, Properties and Controls. DesignScenes & sources |
| Undo / Redo | Undo (Ctrl+Z) and redo (Ctrl+Shift+Z or Ctrl+Y). History covers every layer change in this session. |
| Grid | Shows a grid over the canvas to line things up by eye. Editor only. |
| Safe zones | Dashed amber frame 5% inside the edges (keep text inside it), pink center lines, and — on portrait overlays — shaded areas where the TikTok/Shorts app buttons and caption cover the video. |
| Rulers + guides | Rulers along the top and left (Shift+R). Drag from a ruler onto the canvas to create a guide; layers snap to it. Drag a guide to move it, drag it off the canvas to delete it, double-click it to type an exact position. Guides are saved per overlay. |
| Test data / Live data | Test data: a believable sample stream (events, chat, stats, a song) so empty widgets look real while you design. Live data: your real latest events and chat; when you're live the button shows a red dot and the tooltip your viewer count. Test dataLive data |
| Preview background | What's behind the overlay on the canvas: Transparent (checkerboard), Game scene (a sample gameplay image to judge contrast) or Dark. Never shown in OBS. TransparentGame sceneDark |
| Format | Canvas size: 16:9 · 1920×1080, 9:16 · 1080×1920, 1:1 · 1080×1080, 720p · 1280×720, or Custom size. Changing it doesn't move or scale layers — use Convert format on the overview for that. 16:99:161:1720pCustom size… |
| Zoom − 100% + | Zoom out, fit to window (click the percentage), zoom in (5%–400%). Ctrl + mouse wheel also zooms. |
| Live feed | Wifi icon: green = connected to the live feed (test events and real events arrive). Crossed out = reconnecting. |
| People | Avatars of everyone in this overlay right now (max 5 shown, then +N). Hover for names. |
| Comments | Comment mode (C). The badge counts open comments. See Comments below. |
| Automate | Opens Automate & OBS: if-then rules and the direct OBS connection. See Automations. |
| Versions | Opens the version history: restore an older version into your draft, or discard the draft. See Publish & add to OBS. |
| OBS link | Copies this overlay's private OBS browser-source link. |
| Publish | Opens a small box: optionally describe What changed? (max 80 characters), then Publish now. OBS updates within a second. |
Canvas
| Select / move / resize / rotate | Click to select, drag to move, corner handles to resize, the rotate handle to rotate. Shift = keep ratio / 15° steps. |
| Box select | Drag on empty canvas to select every layer inside the box. |
| Double-click a grouped layer | Enters the group and selects that layer. A bar shows Inside group: Name with Leave (Esc). New layers you add go into that group. |
| Locked layers | Can't be selected or moved on the canvas; unlock them in the layer list. |
| Hover outline | A thin blue outline shows which layer you'd select. |
Scenes & sources mode
The same overlay laid out like OBS. Scenes = your overlays, sources = layers.
| Scenes | Every overlay on the server, as in OBS's Scenes dock. Click one to open it; + creates a new empty scene (overlay) of the same size. A dot marks scenes with an unpublished draft. |
| Sources | The layer list with + Add source: Image, Media source (video), Text, Color source, Browser source, Sound, Shape, Upload your own file…, and below that every DAB widget. Up/down arrows change the order. |
| My uploads | Your library; click a file to add it as a source. |
| Properties | The inspector for the selected source: properties, design, filters and animation. |
| Go live instantly | When on, every change is sent to OBS within half a second — no Publish needed (a red LIVE badge shows on the canvas). Off: changes stay a draft and Send draft to OBS publishes them. OnOff |
| Copy browser source URL / Versions / Automate & OBS | Same as the top-bar buttons. |
Comments
Pins with a short discussion thread, for working together with a mod or artist. Never visible in OBS.
| Place a comment | Press C (or click the speech-bubble button), click on the canvas, type, press Enter. A comment placed on a layer moves with that layer. |
| Reply / Resolve / Reopen | Click a numbered pin to open its thread: reply, mark as Resolved (the pin hides) or reopen it. |
| Delete | You can delete your own comments; the streamer can delete any. |
| Show resolved | While comment mode is on, resolved pins are shown with a check mark. |
Examples#
Keyboard shortcuts
Ctrl+Z undo · Ctrl+Shift+Z / Ctrl+Y redo · Ctrl+C / Ctrl+V copy and paste layers (also works after deleting) · Ctrl+D duplicate · Ctrl+G group · Ctrl+Shift+G ungroup · Ctrl+A select all (inside the current group) · Arrows nudge 1 px, Shift+arrows 10 px · ] / [ bring forward / send backward, Ctrl+] / Ctrl+[ to front / to back · Del or Backspace delete · P pen tool · C comment mode · Shift+R rulers · Esc leave group / clear selection / stop commenting · Ctrl + scroll zoom.
Good to know#
Shortcuts don't fire while you're typing in a field, so typing c in a text box never toggles comments.
Use Game scene as preview background to check your text stays readable over busy gameplay.
If someone else changes the overlay, their changes appear live in yours. If that can't be merged, a bar offers Reload or Ignore.
Troubleshooting#
Not saved stays red
Your connection to the Studio dropped. Keep the tab open; it retries. If it persists, copy important text, reload the page and check Versions.
I can't select a layer
It's probably locked (lock icon in the layer list) or inside a group — double-click it, or select it in the layer list.
Snapping gets in the way
Snapping only kicks in within 6 px. Nudge with the arrow keys for pixel-exact placement, or type X/Y in the inspector.
Was this page helpful?