Customizing Your Overlay
Opening the Overlay Editor
Section titled “Opening the Overlay Editor”To customize an overlay, open the Now Playing dashboard and go to Overlays in the left navigation. Find the overlay you want to edit and click Configure. This opens the overlay editor with a live preview panel on the left and all configuration options on the right. Changes take effect immediately and are saved automatically as you make them.
Choosing a Theme
Section titled “Choosing a Theme”The Choose Theme section of the editor provides a searchable dropdown of all available themes. Click the dropdown and type to filter, or scroll to browse. Selecting a theme applies it immediately and updates the preview.
Available Themes
Section titled “Available Themes”| Theme | Description | Canvas Size |
|---|---|---|
| Default | Simple minimal display with semi-transparent background | 800 × 150 |
| Clean | Artwork with decorative line and animated text | 1280 × 200 |
| Kinetik 3D | 3D chromatic aberration effect | 1100 × 130 |
| ASOT 2K3 | Animated scrolling display | 900 × 200 |
| Sideways | Colored blocks animation | 1000 × 180 |
The recommended canvas size for each theme is shown in the theme selector and in the Your Overlay URL panel. Use these dimensions when setting up your browser source in OBS.
Customizing a Theme
Section titled “Customizing a Theme”After choosing a theme, a Customize Theme panel appears below the theme selector if that theme supports configuration options. Use it to adjust colors and typography to match your stream’s brand. Each theme exposes different options. Click Reset to Defaults at any time to restore the theme’s original appearance.
Display Options
Section titled “Display Options”The Display Options panel lets you control the overall behavior of the overlay:
| Option | Description |
|---|---|
| Show Artwork | Display album artwork alongside track information |
| Align Right | Position overlay content on the right side of the canvas |
| Animate Up | Animate track changes upward instead of downward |
These options apply across all themes. Toggle them on or off and the preview updates immediately.
Preview and Testing
Section titled “Preview and Testing”The preview panel on the left shows a scaled-down live view of the overlay. Because the overlay is loaded from its actual URL, it reflects exactly what your viewers will see in OBS.
Click Test Animation to send a random track to the overlay and trigger the entrance animation. This lets you evaluate transitions and motion without needing your DJ software running. The test track disappears after the display timeout.
Your Overlay URL
Section titled “Your Overlay URL”The Your Overlay URL panel shows the browser source URL to add in OBS. Use the copy button to grab it, or click Open in Browser to preview the overlay at full size in a new tab.
If you ever need to revoke access to your current URL (for example, if it was shared accidentally), click Reset URL to generate a new one. Your old URL will stop working immediately, so update the browser source in OBS with the new address.
Positioning for Common Stream Layouts
Section titled “Positioning for Common Stream Layouts”Because the overlay is a full-canvas browser source, its on-screen position is determined by the theme’s design. Select a theme whose default position matches your preferred layout, and use OBS transforms only for fine-grained adjustments.
Gaming streams. Position the overlay at the bottom of the frame to avoid covering gameplay. The bottom-left position is conventional and keeps the overlay away from kill-feed notifications that typically appear in the top-right.
Just chatting and IRL streams. Any theme works, but compact themes tend to blend better with face-cam content. Position the overlay in a corner away from your webcam feed.
DJ set streams. Viewers are often directly interested in the track name, so a more prominent layout is appropriate. Center-bottom or full-bottom-bar layouts work well.
Vertical streams (mobile/TikTok). Set your browser source to your vertical resolution (e.g., 1080 × 1920), and choose a theme that works at that aspect ratio. Reduce the font size if text overflows.
Using Multiple Overlays
Section titled “Using Multiple Overlays”You can create additional overlays from the Overlays section of the dashboard by clicking New Overlay. Each overlay is independent. It has its own theme, customization settings, and URL. This makes it easy to maintain different looks for different contexts:
- A minimal overlay for your gaming scenes
- A bold overlay for your dedicated DJ set scenes
- A lower-third style overlay for your IRL or talk scenes
In OBS, add each overlay as its own browser source and assign them to the appropriate scenes. Switching scenes automatically switches the visible overlay. All overlays update in real time from the same track source. You don’t need to configure anything separately per overlay.