Overlays

Overlays are the visuals layered on top of your stream — alerts, labels, goals, chat — composed in the StreamElements Overlay Editor and rendered in your broadcast software via a single browser source. When the built-in widgets aren’t enough, you can code your own.

For streamers

Set up overlays, alerts, and widgets in the Overlay Editor — no coding required to get started.

Getting StartedCreate your first overlay and add an AlertBox or Custom Widget in the Overlay Editor.

Custom Code in AlertboxesBuild fully custom alert designs with inline template variables for names, amounts, and messages.

Editor ShortcutsKeyboard shortcuts for moving, duplicating, and grouping widgets in the Overlay Editor.

For developers

Build your own widgets with HTML, CSS, and JavaScript, react to stream events, and use the SE_API from your code.

Your First Custom WidgetStep-by-step tutorial: define fields, write HTML/CSS/JS, and react to a follow event.

Code EditorWrite HTML, CSS, JavaScript, and custom field definitions in the Custom Code Editor.

SE_API ReferenceUse the SE_API store, counters, queue control, and more from your custom widgets.

Widget EventsHandle onWidgetLoad, onEventReceived, and onSessionUpdate events in your widget code.

Session Data ReferenceSession data keys for followers, subscribers, tips, cheers, and more, available to widget code.