Scenes, overlays & design — the browser editor

How to build your scenes, overlays and widgets entirely in the browser — place areas, add elements and manage the look in the design editor. No local OBS needed.

With FizzyPeak you build your scenes and overlays right in the browser — no local OBS installation required. This article shows how the scene editor is laid out, how you add elements and where you change the look.

Done designing? Your whole live scene is available as one link for your encoder — see Overlays in OBS, Moblin or Larix. One link, all widgets in their positions. On IRL Pro+, Cloud OBS does this server-side.

The core principle: position vs. look

FizzyPeak cleanly separates two things:

• Scene editor = where an element sits (position, size, layer) and in which scenes it's visible.
• Design editor = how an element looks (content, colors, font, all styling options).

A widget's look is managed exclusively in the design editor. In the scene editor you'll find a jump button for it ("Design Editor" / "Open design editor") that takes you straight to the matching element.

Scenes and your plan

Which scenes are available to you depends on your plan:

(Yearly prices: €12 / €17 / €30 per month.)

Locked default scenes are shown in the editor but with a lock icon — a click shows the upgrade note. Your own scenes from the Cloud OBS Studio (IRL Pro+) also appear in the scene bar.

On the Starter plan, a FizzyPeak watermark is shown bottom-right in the editor — it matches the later stream output 1:1. From Creator on it's gone.

Two editor modes: Simple and Pro

At the top of the editor you switch between two modes:

• Simple — works with area tiles instead of a free drag canvas. Good for quick setup, especially on touch devices.
• Pro — free drag canvas with live widgets (StreamElements-style).

The chosen mode is saved. By default it's Pro on desktop and Simple on touch devices.

Note: Simple and Pro use separate layouts. Switching doesn't transfer automatically — but your other layout stays saved.

The Pro editor at a glance

The Pro editor has three parts:

1. Left — Layers panel: a list of all overlays, grouped by type, with search and a "Only in this scene" filter. Per entry you can show/hide, rename, duplicate or delete the element. At the top sits the "Add widget" button, at the bottom "Reset positions".
2. Center — Canvas: the 1920 × 1080 work surface of the currently selected scene. Here you drag elements, resize them and order layers.
3. Right — Quick-edit panel: appears when you select an element (see below).

Moving elements on the canvas

• Drag = move
• Corners = scale proportionally (Alt = free)
• Edges = width/height individually
• Arrow keys = move by 10 px (Alt = 1 px)
• Shift = without grid snapping
• Alt + click = select the widget underneath
• Del = remove from the scene
• Esc = clear selection

Use the zoom buttons below the canvas to zoom in/out. With the OBS-BG function you can show your live stream as a background to place overlays accordingly.

Adding elements — the Add picker

Via "Add widget" the Add picker opens (a slide-over) with several sources in the left bar:

• Widgets — the building blocks
• Text / Media — your own text and media elements
• Gallery — ready-made templates from the gallery
• My overlays — your already-created overlays
• My widgets — your own (custom) widgets
• Overlay URL — embed an external overlay by URL

Pick a source, click the element you want, and it lands straight in the current scene.

The quick-edit panel (3 tabs)

When you select an element, the quick-edit panel opens on the right with three tabs:

• Position — X / Y / width / height / Z-layer plus quick presets. Here you'll also find "Copy position to other scenes" and the "Design Editor" button that opens the look.
• Settings — type-specific options. The look and content themselves are not edited here but via a jump into the design editor.
• Scenes — sets which scenes the element is visible in (scene assignment).

Change the look — design editor

To manage colors, font, content and all other styling options, click "Design Editor" / "Open design editor" (palette icon) in the scene editor. The design editor opens straight to the selected element — with all options and a live preview.

Your own custom widgets have no classic design schema — for them the code editor is the "full editor".

That keeps the split unambiguous: position in the scene editor, look in the design editor.

Step by step: set up a scene

1. Open the scene editor and pick the scene at the top (e.g. Live).
2. Choose the mode (Pro for free placement, Simple for tiles).
3. Click "Add widget" and add your elements via the Add picker.
4. Drag them into place on the canvas and adjust the size.
5. Fine-tune position/Z-layer in the Position tab if needed.
6. Open the design editor to style the look and content.
7. In the Scenes tab, set which scenes the element should appear in.

With "Copy position to other scenes" you quickly transfer a finished arrangement to more scenes.

Still have questions? Open the dashboard or message us on Discord in #support.