Skip to main content

HTML overlay

An HTML Overlay element renders a web page inside SwitchX — HTML, CSS, and JavaScript. It's how you build dynamic graphics like scoreboards, clocks, and countdown timers, and any custom motion graphic you can express on the web.

Add it: Add Element → HTML Overlay…, which opens the HTML Editor.

Two ways to build it​

The editor has two modes, each with a live preview:

Simple mode​

For raw HTML or an existing file:

  • Paste or type HTML directly into the editor, or
  • Browse to load an HTML file from disk (and Clear to detach it).
  • Refresh preview to re‑render.

Use this when you already have a web graphic, or want full control over the markup.

Workspace mode​

For composing graphics from bundled widget presets on a canvas — no coding needed:

  • A palette of ready‑made widgets (scoreboard bars, score tables, clocks, countdown timers).
  • Drop widgets onto the workspace, then select one to edit its properties.
  • Duplicate and Delete components, and adjust their position/size with the property controls.
  • Build preview to render the composed layout.

Workspace mode bakes your arrangement into a single overlay you can fire to a deck.

What it can do​

  • Show live, animated graphics over a camera or video (put the overlay on a transparent canvas or on the deck above your footage).
  • Update itself — clocks tick, countdowns count, and scripted pages can change on their own.
  • Transform and position on a canvas like any element.

Typical uses​

  • Sports score bars and tables.
  • A live clock or a countdown to kickoff / showtime.
  • Lower thirds and branded frames built in HTML/CSS.