Skip to content
TipPage Docs
Esc
navigateopen⌘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 - a categorised menu: alerts and event celebrations, media (now playing bar + media screen), chat and community (chat, chat emotes, activity feed, viewer count), support (tip goal, leaderboard), and your own content (text, images, custom widgets). 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 Alert box 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 tip alerts (donor name, amount, message) and Twitch alerts (viewer name, headline text), and the Font. Drag its handles (or set Size) to draw the rectangle the alert must fit - it centers inside, text wraps and the GIF shrinks to fit.

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, wording, and sounds are in the widget’s Alert events section - see Twitch alerts; the TTS voice itself is set 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?