An overlay lets you arrange several visual widgets—such as alerts, labels, goals and chat—as one composition. In StreamElements, you can add those widgets to one overlay and load that overlay into OBS as a single browser source.
That is different from adding several overlay URLs as separate browser sources in a scene. A composed overlay is useful when its elements belong together and you want to lay them out in one editor; separate sources are useful when you need to position or manage those overlays independently.
How widgets and overlays relate
Think of a widget as one component and an overlay as the canvas that holds components. An AlertBox can show an alert, a label can identify a song or channel, and a goal widget can display progress. You can place multiple widgets on the same overlay canvas and arrange them as a single visual layer over your video.
The overlay editor is where you compose the elements; OBS is where you add the resulting overlay to a scene. With StreamElements, the editor provides an overlay URL that you can use in a Browser source. OBS still controls how that source sits in the scene: its dimensions, position, visibility, and relationship to other sources remain OBS settings.
StreamElements describes overlays as visuals composed in its Overlay Editor and rendered in broadcast software through a single browser source. Its overlays documentation covers the relationship between the editor composition and broadcast software. Treat this as a StreamElements workflow, not a promise that every overlay service uses the same terminology or controls.
It helps to draw the boundary before editing. Widgets inside one overlay share that overlay’s layout and URL. Two different overlay URLs added separately to OBS remain two sources, even if you place them on top of one another in the scene. Neither structure is inherently right for every channel; choose according to how you want to organise and maintain the visuals.
Start with a StreamElements Super Theme
A Super Theme can give you a ready-made set of theme elements to use as a starting point. You can select one from the Themes Gallery or create a new overlay in the Overlays area, then edit the overlays and widgets to suit your channel. The Super Theme and AlertBox setup guide explains the theme workflow.
Before you commit to the theme, decide what belongs on the broadcast. A devotional channel may want a restrained alert and a title label, while a study stream might use a quiet schedule or topic panel. For a lofi or ambience loop, a large chat panel may cover visual detail without adding much value. Start with elements that have a clear purpose rather than leaving every sample component enabled.
Set the overlay resolution to match the canvas you plan to use in OBS unless you deliberately want a smaller overlay that you will position and size in the scene. Matching dimensions makes placement easier to reason about: a widget placed in the top-right of a full-canvas overlay is intended to appear in the corresponding area of the broadcast canvas. A smaller overlay can be appropriate for a compact panel, but then you need to position that source deliberately in OBS.
A theme is a starting point, not a finished broadcast layout. Preview its colours and type over the kind of video you actually use. A pale label that looks clear against a dark editor background may disappear over a temple scene or a bright daytime news clip. Keep a note of what you want to retain, remove, or change before you start rearranging elements.
If a theme provides several overlays, do not assume all of them need to be merged. First decide whether the pieces form one consistent layout or whether some should remain independently managed. You can use a Super Theme as a source of components while still choosing a simpler final composition.
Edit overlays and widgets in the editor
Open the overlay in the StreamElements Overlay Editor and add the components you want through its widget picker. The official getting-started guide uses AlertBox and Custom Widget examples; StreamElements also documents other visual components such as labels, goals and chat. Available controls depend on the selected widget, so use the editor’s own options rather than expecting every item to share the same settings.
Arrange each widget on the canvas with the broadcast picture in mind. Keep important text away from the edges, where it can be obscured by the platform interface or lost on a differently sized display. Avoid letting a chat box or goal panel cover the main subject. For a channel that runs continuously, also consider whether the layout will still make sense when no one is chatting or when no alert is active.
Customise the parts that establish a shared theme: colour, typography, scale and spacing. Repeating a small number of visual choices can make widgets feel related without making them identical. Check readability at the size viewers are likely to see, not only when the editor is zoomed in. A short label that fits neatly on a desktop preview may become difficult to read on a phone.
Save the overlay after editing. If the editor offers grouping or duplication controls, they can help you move related elements together or reuse a layout. StreamElements documents shortcuts including Shift+D for duplication and Shift+G for grouping in its Overlay Editor shortcuts reference. Use the reference for the current controls; do not assume shortcuts from another editor will match.
Pay particular attention to AlertBoxes if you are bringing widgets over from multiple theme overlays. A copied theme may leave more than one alert widget active in the composition. StreamElements warns that duplicates can cause the same alert to appear or play audio more than once. Inspect the finished overlay, then hide or remove redundant AlertBoxes so one event does not generate repeated visuals or sound.
This check matters even when the overlays appear visually tidy. Two AlertBoxes may occupy the same position, making the duplicate invisible while its sound still plays. Trigger a test alert after editing if the editor offers that option, and listen as well as looking at the preview. If you cannot tell which alert widget is responsible, temporarily disable one at a time and test again.
Add the composed overlay to OBS as a browser source
When the composition is ready, copy its overlay URL from the editor or overlay manager. In OBS, select the scene where the overlay belongs, add a Browser source, and paste the URL into the source properties. StreamElements’ OBS setup instructions describe this process.
Set the Browser source width and height to match the intended layout. If the overlay is full-canvas, use the stream canvas dimensions you have selected in OBS. If it is intentionally smaller, give the source the corresponding dimensions and place it where it belongs in the scene. This step configures OBS; composing widgets into one overlay does not remove the need to set up the scene or its sources.
Give the source a useful name, such as “Main theme overlay”, so you can identify it later. Keep the overlay URL associated with the correct composition. If you have a separate starting-soon scene or a different layout for an overnight stream, check whether each scene should reuse the same URL or use a distinct overlay. Reuse can be convenient for shared elements, but a change to the composition then affects every scene using that overlay.
The Browser source is one point of organisation, not a guarantee that the finished scene is correct. Confirm the source is visible, that its dimensions are right, and that it is layered above the video sources it should cover. If your scene contains a title card, camera, background or other graphics, arrange those in OBS as usual. The overlay editor controls its own composition; OBS controls how that composition participates in the scene.
For a wider streaming workflow, keep this visual setup distinct from the video and audio path. If you are using a pre-recorded programme or long-running loop, the guide to software for continuous YouTube playback addresses that separate job. A well-composed overlay does not itself keep a broadcast running or resolve a problem with the underlying video source.
When separate browser sources make more sense
You do not have to put every visual element into one overlay. A scene can contain multiple browser sources, each with its own overlay URL. This makes sense if you want to show or hide a particular overlay without changing the others, or if two layouts need to be maintained independently. For example, a lower-third information panel might be used only in a news scene, while a channel identity overlay remains in several scenes.
The trade-off is organisational. One composed overlay means the widget arrangement and styling live together in the editor, and OBS handles that composition as one browser source. Separate overlay sources leave more of the overall arrangement to the broadcast scene, where you position and manage each source. If you change an overlay’s design, you may also need to check how that source fits wherever it is used.
| Choice | Where you arrange the visuals | What you manage in OBS | Useful when |
|---|---|---|---|
| One composed overlay | Widgets are arranged together in the overlay editor | One browser source for that composition, plus the rest of the scene | Several elements form one layout and should be edited together |
| Separate overlay sources | Each overlay is composed separately; the scene combines them | Multiple browser sources, their positions, and visibility | Elements need separate control or belong to different layouts |
This comparison is about control and maintenance, not speed or computer performance. The documentation describes how to organise overlays and sources; it does not establish that either arrangement uses fewer resources or loads faster. Choose based on the edits you expect to make. If you often change the chat panel without touching the channel branding, separate management may be worth the extra source. If the widgets should always move and change as a unit, one composition may be easier to understand.
There is also a middle ground. You can keep a stable group of widgets together in one overlay and use a separate browser source for a special-purpose panel. That keeps the shared design coherent while giving the changing element its own visibility control. Make the source names and scene arrangement clear enough that someone returning to the project after a few weeks can tell which editor overlay each source represents.
Before copying a theme into multiple sources, check for duplicated alerts. Separate overlays may each include an AlertBox, and adding both can produce repeated alert sounds or visuals when the same event reaches them. Decide which source should handle alerts, then hide or remove the extras. This is one reason to inspect both the overlay composition and the scene-level source list rather than assuming a clean-looking preview means there is only one active alert.
Check the overlay in the broadcast scene
Preview the actual OBS scene, not only the StreamElements editor. The scene is where you can see the overlay against your video, check its position in relation to other sources, and catch a source that is hidden or covered. If you use multiple scenes, check each one where the overlay appears. A source that looks correct in the main scene may sit over a different part of the picture in a starting or intermission scene.
Test the states that matter. Check the default view with no alert or chat activity, then test a visible alert if available. Look for text that clips at the edge, elements that overlap, and panels that cover important picture content. Listen for repeated alert audio if you copied or combined theme elements. If your overlay includes chat or a goal, consider what viewers see when that widget is empty or has little information to display.
Review the scene at the canvas size you intend to broadcast. Compare it with the output settings you have chosen, since a mismatch between the overlay dimensions and scene canvas can make placement confusing. For the video stream settings themselves, consult the YouTube live settings guide for 4K 60fps only if that is the format you actually plan to use; overlay composition does not determine your encoding settings.
Keep the layout readable on a small screen. You do not need to add decorative motion just because the editor supports it. For an always-on devotional, study or ambience channel, a stable label and unobtrusive alert may serve viewers better than a screen full of panels. Check that the overlay remains useful during the quiet parts of the broadcast, not only during a test event.
If the image in OBS looks wrong, troubleshoot the layer order and source properties before rebuilding the overlay. Confirm that the Browser source is enabled, that its URL is the intended one, and that its size matches the layout. For a separate video problem where sound is present but the picture is black, use the focused black-video troubleshooting guide; that issue is distinct from arranging widgets.
The final decision should be easy to explain: which elements are composed together, which remain separate, and where each source is controlled. Keep that note with the project or source names. It is a small maintenance step that helps when you later change a theme, add a new scene, or need to find a duplicate widget after hearing an unexpected second alert.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
Does one overlay mean all widgets are a single OBS source?
In the StreamElements workflow described here, several widgets arranged inside one overlay can be loaded into OBS through one Browser source. OBS still has its own scene and source settings to configure. Other overlay tools may organise their editors differently, so check their documentation rather than assuming the same controls.
Can I combine overlays that are already in separate themes?
You can use theme elements as a starting point and arrange the widgets you need in an overlay, but inspect what you copy. In particular, look for multiple AlertBoxes, since duplicates may generate repeated audio or visuals. Keep a backup or note of the original theme if you may want to restore its earlier layout.
Should I use one overlay or several browser sources?
Use one composed overlay when its widgets belong together and you want to edit their shared layout in one place. Keep overlays as separate sources when you need independent scene-level positioning or visibility. The choice is about how you want to manage the design, not a guaranteed performance difference.
Do I still need to configure OBS after composing the overlay?
Yes. You still add the Browser source, set its dimensions, place it in the scene and check its layer order and visibility. The editor composes the widgets; it does not configure the rest of your broadcast scene for you.