Compositor

The Compositor is the visual editor for arranging your overlay. It gives you a live 1920×1080 canvas where you can position, resize, and layer your widgets to build exactly the overlay you want.

Opening the Compositor

Click Compositor in the left sidebar of the dashboard.

The Canvas

The canvas represents your full stream frame at 1920×1080. Widgets appear on the canvas as draggable, resizable boxes. What you see in the canvas is what renders in OBS.

• Drag a widget to reposition it.
• Drag the corner to resize.
• Click a widget to select it and see its settings in the right panel.

The canvas scales to fit your browser window, but the underlying resolution is always 1920×1080 — positions are exact pixel coordinates.

Adding Widgets

Click Add Widget to open the widget picker. Select from:

• Chat
• Alerts
• TTS
• Media
• Goal
• Giveaway
• Captions
• ...and more

Each widget type can be added once. Some widgets (like Alerts) are invisible in the composer until they fire — that's expected.

Layers Panel

The Layers panel on the right shows all widgets in your overlay. Use it to:

• Reorder — drag to change z-index (which widget appears in front).
• Toggle visibility — click the eye icon to show/hide a widget without deleting it.
• Lock — lock a widget so it can't be accidentally dragged on the canvas.
• Delete — remove a widget from the overlay.

Layers are ordered top-to-bottom in the panel (top = frontmost).

Presets

Presets let you save and switch between different overlay layouts. Common uses:

• Starting Soon — minimal layout with a countdown or goal widget.
• Live — your full overlay with chat, alerts, and TTS.
• BRB — a simple "be right back" layout.

To save a preset: click the preset dropdown → Save as New Preset → give it a name.

To switch presets: select from the dropdown. The overlay updates immediately in OBS — no reload needed.

Live Preview

The canvas updates in real time. Open your overlay URL in a separate browser window alongside the Compositor to see exactly how changes look in the full overlay context.

For widget-specific settings (fonts, colors, themes), use the widget's settings panel in the dashboard — changes there also reflect in the Compositor preview.

Overlay URL

Your overlay URL is shown at the top of the Compositor:

https://4throck.cloud/widgets/compositor/overlay?key=YOUR_KEY

This is the URL you add to OBS as a Browser Source. It never changes — you only need to add it to OBS once.