Layout editor

The editor is where layouts are built. It works like OBS: scenes on the left, the canvas in the middle, sources and their properties on the right. What you see on the canvas is the same renderer the overlay uses, so the preview is what goes on stream.

Open a layout from the organization page. Editing needs the editor role or higher.

Scenes

A layout has one or more scenes: setup between runs, normal-16x9 for a solo run, race-2-4x3 for a two-person race, and so on. Each scene has its own size (1920×1080 by default) and its own sources.

• + adds a scene. Double-click a name to rename it, drag to reorder.
• The menu of a scene duplicates or deletes it.

Scene names matter on the live dashboard. Auto picks a scene from the number of runners and the aspect ratio: normal-<ratio> for a solo run, race-<n>-<ratio> for a race, with ratios such as 16x9 and 4x3. Breaks look for a scene named break, intermission or interview. Keep those names if you want the dashboard to choose for you.

Canvas

The canvas shows the selected scene scaled to fit, over a checkerboard where the scene is transparent.

• Click a source to select it, then drag to move it. The handles resize and rotate it.
• Sources snap to the canvas edges, the center lines and other sources. Rotation snaps to 45° steps.
• Zoom with the buttons in the top bar or Ctrl/⌘ + wheel; Shift 1 fits the scene to the screen.
• Safe areas draws the 90% action-safe and 80% title-safe frames and the center lines.

Sources

The source list shows the selected scene's sources, top first, like OBS.

• Add opens the module picker, with search and categories. A new source lands in the middle of the scene.
• Drag to change the order. The eye hides a source, the lock keeps it from being moved by accident.
• The menu duplicates, brings to front, sends to back, makes a component or deletes.
• Double-click to rename. Names help on the canvas and in OBS, when a source renders in OBS.

Every source is an instance of a module: text, image, timer, runner card, game feed and so on.

Properties

With a source selected, the Properties tab shows its name, transform and settings. With nothing selected it shows the scene and the layout. The right panel can be widened by dragging its edge.

Transform

X, Y, width, height, rotation and opacity, in scene pixels. Type a value or drag on the canvas; both edit the same thing.

Settings

The rest of the form comes from the module: the text of a text source, which runner a runner card shows, the format of a timer. Each module's settings are listed in Modules. Changes here wait for the save button (disk icon) in the section's header before they reach the canvas; the arrow next to it discards them.

Scene properties

With nothing selected: the scene's name, size (with presets) and background. With no background the scene is transparent, which is what OBS shows behind it. The background can be a color or an image from the library.

Layout tokens

Tokens are the layout's shared values: colors, fonts, radius. A token color-accent reaches every source's CSS as var(--layout-color-accent). Changing a token changes every place that reads it, which is how the base layouts switch between themes. Token names use lowercase letters, digits and dashes.

Tokens whose name starts with font get a font field. Pick a family from the Google Fonts list (search by name; each family shows in its own type), or type a name that isn't there, such as a font installed on the streaming PC or one the layout CSS loads with @font-face, and choose Use "…" as a custom family. Next to it set the weight, the size in pixels, the line height (LH) and italic. The token stays a CSS font value such as 700 32px/1.2 "Exo 2", sans-serif, so CSS uses it as font: var(--layout-font-heading). Overlays and the editor load Google families by themselves. The code button switches to the raw value, for anything the fields don't cover.

Layout CSS

One stylesheet for the whole layout, on every scene. Use it for classes many sources share (.panel, .badge) and for fonts. It applies to the stage only and can't reach the rest of the page. Styles that are specific to a scene can target [data-scene="setup"]. The CSS applies when you click Save changes (or press Ctrl/⌘ S in the editor); closing with unsaved CSS asks first.

Render as OBS source

Text, shapes, timers and stream feeds can render as native OBS sources instead of HTML. Turn on OBS source in the source's properties to do it. For text you pick the font, size, color, style and alignment OBS uses; the layer puts it below or above the browser source. On the canvas these sources show as dashed placeholders. How this works in OBS is in OBS sources.

Code

The Code tab edits the selected source's Template, CSS and JS. You start from the module's default code; a dot marks code you changed and Reset to default brings the module's code back. Edits in the three tabs reach the canvas when you save them with the disk icon or Ctrl/⌘ S inside the code editor, together, as one undo step.

• Template is HTML with Liquid tags ({{ run.game }}, {% for runner in runners %}). The list under the editor inserts variables and filters at the cursor.
• CSS applies to that source only.
• JS runs in a sandbox, apart from the overlay page.

Everything you can use in them is in Templates and code.

Components

A component is a customized source that every scene of the layout can share: a runner panel, a logo, the timer. Change it once and every use follows.

• Make component (in a source's menu) turns the source into a component and its first use.
• The Components list under Sources shows each component and how many times it is used. Its menu adds it to the current scene, renames it or deletes it. Deleting a component keeps its sources as they looked, detached.
• A source that uses a component has a switch in Properties. This item changes only that source, and only what you change is stored, the rest keeps following the component. Component changes the defaults every use gets.
• The Code tab of such a source always edits the component's code and tells how many sources share it. Detach copies the code and settings into the source and cuts the link.

Component library

The Library keeps components at the organization level, to reuse across layouts. Save to library copies a component there. Adding from the library copies it into the current layout; adding it again later refreshes your copy. The library never changes a layout by itself.

Blocks

A block is a group of sources with its own canvas, placed in scenes as a single source. Use it for what many scenes repeat with small differences: an omnibar, a footer, an info bar.

• Blocks (left panel, under the scenes) lists them with a thumbnail and the number of uses. + creates a block and opens it; the menu adds it to the current scene, renames or deletes it. Deleting a block replaces each use with copies of what it showed.
• Editing a block shows it on the canvas at its design size, with Back to scene on top. Sources, properties, code and undo work as in a scene.
• A block in a scene moves, resizes and rotates like any source. Its properties have Edit (opens the block and comes back), Detach (replaces it with copies of its sources) and a field per variable.

Variables

With nothing selected inside a block, its properties list its variables. Each has a name (lowercase, digits and dashes), a label, a type (text, color, number, image, yes/no or font) and a default. A font variable has the same field as font tokens (see Layout tokens) and reaches CSS as a font value: font: var(--block-<name>).

Every setting of a source inside the block has a link button. Linked to a variable, the setting takes each use's value instead of a fixed one. Variables also reach code: var(--block-<name>) in CSS and {{ block.<name> }} in templates.

An example: an omnibar with a donations-label variable can say "Raised" on one scene and "Total" on another.

Anchors

Each source inside a block has an Anchor, which decides what it does when the block is placed at a different size than it was designed:

• Scale (the default) grows or shrinks the source and its content with the block.
• Left, Right, Top, Bottom keep its size and pin it to that edge.
• Center keeps its size and keeps it in the middle.
• Stretch keeps both margins, so the source grows with the block while its content keeps its size.

An omnibar placed narrower than designed can keep its logo on the left and its total on the right while the middle part shrinks.

Preview state

The canvas doesn't need a live marathon. The Preview state picker in the top bar fills it with sample data: a solo run, a race of 2, a race of 4, a finished race, or a break with a countdown. Use it to check every scene in the situations it will face.

To test something the samples don't cover, open Preview controls (the antenna button next to the picker). It works like a small live dashboard for the canvas: change the run, the runners and their streams, the race mode, the upcoming runs, the ticker, the music and the donation total; start, pause, finish and reset the timer; start a countdown. Changes wait for the save button (disk icon) at the top of the panel, then show on the canvas (the scene thumbnails catch up a moment later); they never reach a marathon. The JSON tab shows the whole state for what the fields don't cover (feeds, avatars, schedule times); Apply checks it and puts it in the fields, to save with the rest. Once you change something the picker reads Custom; picking a sample starts over from it.

Saving and history

Edits save by themselves a moment after you stop; the top bar shows Saved, Unsaved, Saving or Not saved. If the connection drops, your edits are kept in the browser and the editor offers to restore them on your next visit.

Autosave doesn't change what's on stream. Save version (Ctrl/⌘ + S) publishes the current design: it stores a version with an optional message and every overlay using the layout reloads it.

History lists the versions with who saved them and when; the one on air is marked. Select one to see it on the canvas, then restore it or go back to editing. Restoring creates a new version with the old content, so nothing is lost.

Undo and redo keep the last 200 steps.

Keyboard

Shortcuts are ignored while you type in a field or the code editor.