Skip to content
TipPage Docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

Edit your overlay

The overlay editor - drag, resize, and style your widgets on your overlay's canvas.

Click Edit on any overlay to open the editor: a canvas at the overlay’s own resolution (1920 x 1080 by default, chosen when you create the overlay) showing exactly what OBS will render, with live previews of your alerts and now-playing bar using your real fonts, colours, and currency.

The basics

  • Add widget - pick from tip alert, media player, tip goal, chat, and Emotesplosion. There are layout presets too if you’d rather start from something sensible.
  • Drag and resize anything on the canvas. The Layers list in the sidebar shows every widget with reorder arrows (stacking order - top of the list is on top of the stream), a visibility eye, and a remove button.
  • The eye means invisible, not off. A hidden widget keeps running on stream - media still plays and you’ll still hear it, alert sounds and TTS still fire - it just doesn’t render. To turn a widget off completely, remove it from the layout.
  • Inspector - select a widget to get its settings: position, size, style, colours, fonts, and per-widget options. Lock position stops accidental nudges.
  • Grid snap and Safe frame (in the settings gear) help you line things up and keep clear of the edges.
  • Save - changes apply to the live overlay the moment you save. The overlay in OBS reloads itself; no manual refresh needed.

Styling your alerts

Select the Tip alert widget. You get the entrance Animation (Slide up, Rise, Fade, Pop, Drop in, Sweep), Text motion (Float, Breathe, Pulse, Wave, Bounce, Shimmer, or none), colours for the donor name, amount, and message, and the Font.

One style to rule them all: the alert style, animation, and font you set here also apply to your Twitch alerts, so every alert matches.

The Donation audio section controls this overlay’s sound: whether tips are read aloud here, whether message text shows, and the volume. Per-event toggles and sounds live on the Alerts page; the TTS voice itself lives on the TTS page.

Checking your work

  • The canvas previews are static mock data (“Test User tipped £5”) so you can style without spamming yourself.
  • Live view (top bar) opens the real overlay URL in a new tab.
  • For the full end-to-end test - through the actual queue, with sound - use test alerts.

Was this page helpful?