Skip to main content

Overlay Editor

The Overlay Editor is Community'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​