Layers & elements
PremiumStudio → Overlays → Layers & elements65 settings10 min read
Everything on an overlay is a layer. The left panel adds layers from four tabs — Widgets, Elements, Uploads and Components — and lists them top-to-bottom like OBS's Sources dock. Select a layer to edit it in the inspector on the right: the Properties tab holds position, size and the layer's own settings; Design & animation holds styling (see Design & animation).
How it works#
- New layers are placed in the center of the canvas (or inside the group you're working in) and selected straight away.
- The layer list shows the top layer first. Drag rows to reorder; drop onto the middle of a group to put a layer inside it.
- A group moves, hides and locks everything inside it. Its box always wraps its children.
- With nothing selected, the inspector shows a shortcut cheat sheet and the canvas size. With several layers selected it shows alignment, distribution and a shared opacity slider.
Before you start#
An overlay open in the editor.
Set it up#
Part 1Build a simple name plate6 steps
Open the editor
On the Overlays tab, click an overlay's thumbnail or its Edit button.
Add a shape
Left panel → Elements → Rounded. A dark rounded rectangle with a blue border appears.
Add text
Elements → Text. Type your name in the inspector's Text box and pick a font.
Line them up
Select both (box-select or Shift-click), then use the align buttons: Center horizontally and Center vertically.
Group them
Press Ctrl+G. Rename the group by double-clicking it in the layer list.
Reuse it
With the group selected, click Save as component in the inspector, name it, save. It's now under Components in every overlay.
Dragging the group moves the shape and text together.
Every setting explained#
Add panel — Widgets
Live widgets, grouped. The search box filters by name. Full reference: Widgets.
| Alerts & events | Alert box, Event list, Label, Ticker, Emote rain. |
| Goals & counters | Goal, Progress bar, Hype meter, Sub train, Countdown, Count-up timer, Session stats. |
| Chat & community | Chatbox, Poll, Leaderboard, Credits, Discord stats, Discord activity, Twitch stats. |
| Camera & socials | Webcam frame, Socials, Discord voice. |
| Media | Media Share, Now Playing, Sponsor overlay, Custom HTML/CSS/JS. |
Add panel — Elements
Plain building blocks, each with sensible defaults.
| Heading / Text | Heading: 900×140, 96 px, extra bold, centered, with shadow. Text: 520×80, 40 px. |
| Rectangle / Rounded / Ellipse / Triangle / Polygon / Star / Line | Shapes. Rounded is a dark panel with a blue border and 28 px corners; Polygon starts with 6 sides, Star with 5 points. |
| Pen (P) | Draw your own shape: click to drop points, click the first point to close it, Enter or double-click to finish an open line, Backspace removes the last point, Esc cancels. |
| Image / Video | Empty image (fit: fully visible) or video (fit: fill) — choose a file in the inspector. |
| Browser source | Shows another web page inside your overlay (800×450). |
| Color fill | A full-canvas color layer — a solid background. |
| Sound | An audio layer that plays in OBS while the layer is visible (looping by default). |
Add panel — Uploads
Your library. Same files as the My library tab on the overview.
| All folders | Filter the library by folder. |
| Upload | Pick a file: PNG, JPG, GIF, WebP, MP4, WebM, any audio, or a font (.woff2, .woff, .ttf, .otf). In the dialog set a name, an optional folder (e.g. Logos), and whether to Add it to the canvas as a layer right away. |
| Click a file | Places an image or video on the canvas, scaled to fit within 60% of the canvas. Sounds and fonts can't be placed directly — use them in a Sound layer, the alert designer or a font menu. |
| Rename / Delete | Pencil = rename or move to another folder; bin = delete from the library (layers already using it keep working until you change them). |
| Usage bar | How much of the server's 500 MB library is used. Max per file: images 10 MB, video 25 MB, audio 8 MB, fonts 5 MB. |
Add panel — Components
Your own reusable building blocks, saved from a selection.
| All / Frames / Components | Filter by kind. Frame is meant for borders and webcam frames; Component for anything else. |
| Click a component | Inserts a fresh copy in the center of the canvas (inside the current group if you're in one). |
| Delete | Removes it from the components list. Copies already on overlays stay. |
Layer list
Top row = top layer.
| Click / Shift-click / Ctrl-click | Select one layer / add or remove layers from the selection. |
| Double-click name | Rename the layer (max 60 characters). Enter saves, Esc cancels. |
| Drag a row | Reorder. Dropping on the middle of a group puts the layer inside it. |
| ▸ / ▾ | Collapse or expand a group. |
| Lock | Locked layers can't be selected or moved on the canvas — handy for backgrounds. |
| Eye | Hide or show the layer. Hidden layers aren't shown in OBS either (after publishing). |
| Group (Ctrl+G) / Ungroup (Ctrl+Shift+G) / Delete (Del) | Act on the current selection. |
| ↑ / ↓ (Scenes & sources mode) | Move a source one step up or down. |
Inspector — every layer
| Name | The layer's name, as shown in the layer list and in automation menus. |
| Align (6 buttons) | Left, center horizontally, right, top, center vertically, bottom. With one layer: aligns to the canvas. With several: aligns to each other. |
| X / Y / B / H | Position (from the top-left corner) and width/height in pixels. |
| ° | Rotation, −180 to 180. |
| % | Opacity, 0–100. |
| Distribute horizontally / vertically | With 3 or more layers selected: equal spacing between them. |
| Save as component | Saves the selection (including everything inside groups) as a component or frame, for reuse in any overlay. |
Text
| Text | Up to 2000 characters. Line breaks work. Live tokens are filled in from the latest events. |
| Link live data | Click to insert a token: Latest follower {{latestFollower}}, Latest subscriber {{latestSubscriber}}, Latest gift sub {{latestGiftSub}}, Latest bits {{latestCheer}}, Bits amount {{latestCheerBits}}, Latest raider {{latestRaid}}, Raid viewers {{latestRaidViewers}}, Latest donor {{latestTipper}}, Donation amount {{latestTipAmount}}. |
| Font | Your brand-kit and uploaded fonts first, then built-in ones: Inter, Poppins, Montserrat, Roboto, Oswald, Bebas Neue, Anton, Rubik, Space Grotesk, Press Start 2P, Bangers, Permanent Marker, Orbitron, Playfair Display, JetBrains Mono, Pacifico, Comfortaa, Lobster and more. |
| px / weight | Font size 6–400 px; weight 300 (light) to 900 (black). |
| Color | Color picker, any CSS color (e.g. rgba(255,255,255,.8)), or a brand-kit swatch. |
| Left / Center / Right · Top / Middle / Bottom | Horizontal and vertical alignment inside the text box. |
| Italic / AA / Shadow | Italic, ALL CAPS, and a soft drop shadow. |
| ↔ / ↕ | Letter spacing (−10 to 50) and line height (0.6–4). |
| Auto-fit | When on, the text shrinks (down to min px) so it always fits its box — great for long viewer names. OnOff |
| Text path | Straight, Arc, Circle or Wave. With a path, curve (−100 to 100) sets how strong the bend is. StraightArcCircleWave |
Shape
| Shape | Rectangle, Ellipse, Triangle, Polygon (3–12 sides), Star (3–24 points, plus inner-radius ratio), Line. RectangleEllipseTrianglePolygonStarLine |
| Fill type | Solid, Gradient (two colors + angle 0–360°), Radial gradient (two colors from the center) or No fill. SolidGradientRadial gradientNo fill |
| Fill / Second color | The colors of the fill. |
| Border | Border color, width (0–100 px) and — for rectangles — corner radius (0–1000 px). |
| Dashed border | Dashes instead of a solid border. |
Path (pen drawings)
| Stroke / width | Line color and thickness (0–100 px). |
| Closed shape | Connects the last point to the first; then a Fill color appears. |
| Smooth | Rounds the corners between points into curves. |
| Dashed border | Dashed line. |
| Points | Shows the point count. To change the shape, draw it again with the pen. |
Image & video
| Choose file | Upload a new file or pick one from your library. |
| URL | Or paste a direct https link to an image/video. |
| Fit | Fully visible (whole file, may leave empty space), Fill (crop) (covers the box, crops edges), Stretch (distorts to fit). Fully visibleFill (crop)Stretch |
| ◜ radius | Rounded corners, 0–1000 px. |
| Loop / Muted (video) | Video loops and is muted by default. Turn Muted off to hear it in OBS. |
Browser source, color fill & sound
| Browser source URL | Any https page — a tip goal, a third-party widget, your own page. Only https links are saved. Some sites refuse to be embedded. |
| Zoom | Scales the page inside the layer, 0.25×–4×. |
| Color source | One color (any CSS color) filling the layer. |
| Sound file | Upload or pick an audio file; preview it with the player. |
| Volume / Loop | 0–100% and whether it repeats. It plays in OBS while the layer is visible — combine with Visibility → Only on an event or an automation to play it at the right moment. |
Good to know#
Hold Shift while resizing images to keep them from stretching.
Put backgrounds at the bottom of the layer list and lock them, so clicks go to the layers above.
Ctrl+C / Ctrl+V copies layers within the overlay — paste even works after you deleted the originals.
Troubleshooting#
My uploaded font doesn't appear
Fonts appear by the name you gave them in the library. Reload the editor after uploading so the font list refreshes.
A browser source stays blank
The site probably blocks embedding (X-Frame-Options). Check the URL is https; try the same link in OBS directly as its own browser source.
Sound doesn't play in OBS
On the OBS browser source, tick Control audio via OBS and check the source isn't muted in OBS's audio mixer.
Was this page helpful?