Overlay Editor
The Overlay Editor is Streamerly's visual tool for building custom stream overlays. Create layouts with drag-and-drop widgets, configure animations, and display dynamic content — all rendered as a browser source in OBS.
How Overlays Work
- Create an overlay in the Overlay Manager — each overlay gets a unique browser source URL
- Add widgets to the overlay canvas — alert boxes, text, images, progress bars, and more
- Position and configure each widget with the visual editor
- Copy the OBS URL and add it as a Browser Source in OBS Studio
- Widgets update in real-time as stream events happen
Key Features
- Drag-and-drop canvas — Position widgets anywhere on a 1920x1080 (or custom) canvas
- 70+ widget types — From simple text and images to interactive alert boxes and game elements
- Live preview — See exactly how your overlay looks as you build it
- Animation support — Configure entrance/exit animations with multiple easing options
- Dynamic variables — Display live stream data like viewer count, sub count, and uptime
- Template functions — Format dates, numbers, and durations in your text widgets
Getting Started
If you're new to overlays, follow the Getting Started guide to create your first overlay and add it to OBS.
Sections
- Widgets — Browse all available widget types
- Single Widgets — Individual display elements
- Group Widgets — Container widgets that hold other widgets
- Special Variables — Dynamic stream data for text widgets
- Special Functions — Formatting functions for text templates