Custom overlays — build a bespoke graphic by editing OMUL

Show Runner's built-in overlays cover most of what a live show needs, and you style them with simple form fields — text, colours, a logo. But sometimes "close" isn't enough: you want the bar a little higher, your brand's exact motion, an extra element, a different entrance. That's what OMUL is for. This guide shows how to take a supplied overlay and make it genuinely bespoke. It builds on broadcast graphics and overlays.

Two ways to make an overlay

• Configure a built-in template. Pick a library overlay (a lower third, a bug, a slate) and set its text and colours in a form. Fast, and right most of the time.
• Author a custom overlay in OMUL. When you need control the form doesn't expose — layout, extra elements, your own animation — you build a Custom Animation and edit its OMUL.

The second is where bespoke happens, and the quickest way in is to start from a supplied sample and change it.

What OMUL is

OMUL — Overlay Mark-up Language — is the declarative markup that describes an overlay. It's a single, readable document that defines three things:

• Elements — the components on screen (text, shapes, images, groups), each pinned to a position on the 1920×1080 canvas.
• A timeline — the entrance (in) and exit (out) animation: how each element moves, fades or scales on and off.
• Controls — the fields you choose to expose (a name, an accent colour, a logo), which feed live values into the overlay through {{key}} substitution.

That last part is the trick that keeps a custom overlay reusable: rather than hard-coding "Jane Doe", you add a name control and write {{name}} in the element, so the overlay stays editable from a simple form once it's built.

A trimmed OMUL document looks like this:

{
  "canvas": { "width": 1920, "height": 1080 },
  "hold": 5,
  "controls": [
    { "key": "name",   "label": "Name",   "type": "text",  "default": "Jane Doe" },
    { "key": "accent", "label": "Accent", "type": "color", "default": "#00e5ff" }
  ],
  "elements": [ /* text, shapes, images — positioned and bound to {{name}} etc. */ ],
  "timeline": { "in": [ /* entrance keyframes */ ], "out": [ /* exit keyframes */ ] }
}

Modify a supplied template into a bespoke overlay

The fastest route to a custom overlay is to start from one that already works:

1. Open Custom Animations. In the overlay studio, switch to the Custom section.
2. Import a sample — a supplied overlay template (lower third, on-air, breaking strap, slate, stat callout, bug, social card). This drops its full OMUL into the editor as your starting point. (Or start blank from the skeleton.)
3. Edit the OMUL. Change positions, colours, fonts, the elements themselves, and the entrance/exit timeline — directly in the markup. The preview updates live as you type, and the editor validates as you go, so you can't save broken markup.
4. Expose your own controls. Add entries to controls and reference them with {{key}} so your bespoke overlay carries its own colour pickers and text fields — the same friendly form the built-ins have.
5. Save. Your version is saved with the overlay and listed under your custom animations. Editing a sample never changes the original template — you're working on your own copy.

{
  "canvas": { "width": 1920, "height": 1080 },
  "hold": 5,
  "controls": [
    { "key": "name",   "type": "text"  },
    { "key": "accent", "type": "color" }
  ],
  "elements": [ … "{{name}}" … ],
  "timeline": { "in": […], "out": […] }
}

What you can change

Because you're editing the markup directly, effectively everything is yours to shape:

• Layout — move, resize and re-anchor any element on the canvas.
• Look — colours, fonts, shapes, images, opacity.
• Content — add or remove elements, and decide which parts are fixed and which are {{controls}}.
• Motion — author the entrance and exit: what moves, fades or scales, and when.

The honest caveat: today OMUL is edited as markup (JSON), not with a visual drag-and-drop builder — there's an in-editor reference to hand, and importing a sample means you're rarely starting from a blank page. It's a Pro feature, part of the overlay studio.

Getting it on your stream

A custom overlay is still an overlay: once saved it gives you a single URL you drop into a browser source in OBS or vMix, and it can be driven live on an overlay channel — take it on and off on cue, with your entrance and exit animation firing each time.

How Show Runner handles it

Show Runner's overlay studio gives you both paths: configure a built-in template from a form, or build a Custom Animation in OMUL when you need something bespoke. Import a supplied sample, edit its markup — positions, colours, elements and the in/out timeline — expose your own {{controls}}, preview live, and save your own version without touching the original. The result behaves like any other overlay: one URL for OBS or vMix, drivable on a channel.

FAQ

What does OMUL stand for?

OMUL is Show Runner's Overlay Mark-up Language — the declarative markup (a JSON document) that defines an overlay's elements, its entrance/exit animation, and the author-defined controls that feed live values in via {{key}} substitution.

Can I customise a built-in overlay without starting from scratch?

Yes — that's the recommended way. In the Custom Animations section you import a supplied sample, which loads its full OMUL as your starting point, then you edit the markup into your own version. Your edits are saved to your copy and don't affect the original template.

Do I need to write code to make a custom overlay?

You edit OMUL as markup (JSON) rather than with a visual drag-and-drop editor, but importing a sample means you start from a working overlay and change it, with a live preview and validation to guide you and an in-editor reference. Exposing {{controls}} then lets you (and others) tweak the finished overlay from a simple form.

Will my custom overlay work in OBS and vMix?

Yes. Like every Show Runner overlay it produces a single URL you add as a browser source in OBS or vMix, and it can be driven live on an overlay channel with its entrance and exit animation.

New to overlays? Start with broadcast graphics and overlays. Or start for free.