The editor.
Where overlays are built. A canvas in the middle, your layer stack on the left, and an inspector on the right that changes to match whatever you have selected.
The canvas
A true-to-size preview of your overlay, transparent like it will be on stream. Drag widgets to move them, pull the handles to resize, and zoom in for fine work. Turn on the grid and snapping from the canvas controls to keep things aligned. Hold a modifier and click to select more than one widget at a time.
The layers panel
Every widget is a layer. Reorder by dragging: higher in the list sits on top. Each layer has quick toggles:
- Visibility: hide a layer in the editor without deleting it.
- Lock: freeze a layer so you do not nudge it by accident.
- Rename: useful once you have a dozen widgets.
Select a few widgets and group them so they move together. Groups can be nested.
The inspector
Select a widget and the right panel fills with its controls. What you see depends on the widget, but the common tabs are:
| Tab | What it does |
|---|---|
| Layout | Exact X / Y / W / H in pixels, stack order and opacity. |
| Animation | Entry and exit motion, their duration, and how long the widget holds on screen. |
| Style | Background, colors, fonts, borders and shadows for the widget and its blocks. |
| Variations | Alternate looks that fire on different events. See Variations. |
Text widgets can be edited right on the canvas. Double-click one to type, format the text, and drop in tokens like {latest_follower} that fill in live.
Saving and testing
Edits save as you go, the topbar shows when it is saving and when everything is saved. There is no separate publish step: because your edits save automatically, your overlay URL always serves your latest work.
Click Test Alert in the topbar to fire a realistic fake event (a sub, a 47-viewer raid, a merch order) so you can tune timing and motion without waiting for the real thing. You can play it on the canvas, send it to your live overlay, or isolate it so other widgets get out of the way.