Skip to main content

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

  1. Create an overlay in the Overlay Manager — each overlay gets a unique browser source URL
  2. Add widgets to the overlay canvas — alert boxes, text, images, progress bars, and more
  3. Position and configure each widget with the visual editor
  4. Copy the OBS URL and add it as a Browser Source in OBS Studio
  5. 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