Aiden's Blog

HTML Graphics with Rive and CasparCG

| 3 min read

Build clean, broadcast-ready lower thirds using Rive and CasparCG. Convert a .riv to a CasparCG ready HTML template, enable WebGL in Caspar, output true key/fill via DeckLink, set up a ATEM switcher, plus quick tips for presets, live updates (F-keys), CORS-safe logos, layering, and common fixes.

Building Broadcast-Ready HTML Graphics with Rive and CasparCG

For this project I set out to solve a familiar problem in live production: how to get clean, animated lower-third graphics on a broadcast switcher without investing in a graphics system.

Instead of the usual CG workflow, I’m using Rive — a real-time vector animation engine — to build the graphics, and CasparCG to play them out with proper key/fill over SDI into a switcher.

Here’s the basic setup and workflow.

The Hardware Setup

On the hardware side, the setup looks like this:

  • Switcher: Blackmagic ATEM Constellation 2 M/E (standing in for any SDI broadcast switcher)

  • Graphics Output: Blackmagic UltraStudio 4K, connected via Thunderbolt to my laptop

  • Graphics Engine: CasparCG server + client running on my laptop

CasparCG can output in several ways (NDI, HDMI, SDI, etc.). As well as using multiple hardware devices (Blackmagic, Bluefish). In this walkthrough, i'm using a UltraStudio as the SDI key/fill source into the ATEM.

Designing the Lower Third in Rive

The lower third is built in Rive as a .riv file which you can download and remix from the Rive marketplace.

Key points of the setup:

  • Two artboards

    • One for the graphic itself

    • One that positions the graphic in a 16:9 frame (this is the one we will render out for broadcast)

  • State machine & view model

    • Rive’s state machine drives the in/out animation, much like Unreal’s state machines.

    • A view model exposes all the controls CasparCG needs:

      • name (main line of text)

      • drop line (subtitle/role)

      • logo (an image URL)

      • logo scale

      • color for the background

      • in and out triggers for animation

If you want you can download the sample file here and skip to the next part.

Generating the CasparCG HTML Template

The secret sauce is a small front-end tool (served via GitHub Pages) that uses Rive’s web runtime API to inspect a .riv file and auto-generate a CasparCG HTML template.

https://awils27.github.io/rive-HTML-graphics/

Workflow:

  • Load the .riv file in the tool.

  • Pick the artboard (the 16:9 layout) and state machine to use.

  • The tool lists all exposed properties (text fields, images, numbers, triggers, etc.).

  • Choose:

    • A Runtime: WebGL (recommended) or Canvas (WebGL requires an extra Caspar setting)

    • Whether to embed the Rive file into the HTML as Base64

  • Map the in/out/next triggers for CasparCG’s take in / take out / continue logic.

  • Download:

    • The HTML template (for CasparCG’s templates folder)

    • An XML preset file for the CasparCG client

The generated HTML includes the Rive runtime, wiring for all your view model properties, and (optionally) the embedded .riv file.

Configuring CasparCG for SDI Key/Fill

In casparcg.config:

  • Set the video mode (e.g. 1080p5994) to match your switcher.

  • Point the templates path at the folder where your HTML lives.

  • Under <consumers>, add a DeckLink (or UltraStudio) consumer:

    • Choose the correct device number

    • Set keyer to external for SDI key/fill (A = fill, B = key on many UltraStudios)

If you’re using the WebGL Rive runtime, also enable GPU acceleration in the HTML section of the config:

<enable-gpu>true</enable-gpu>

Once that’s done, restart CasparCG and the server should output key/fill over SDI.

Driving the Graphic from the CasparCG Client

In the CasparCG client:

  1. Refresh the library – your new Rive-based lower third appears under templates.

  2. Import the XML as a preset. This pre-fills all the fields (name, drop line, logo URL, etc.).

  3. Drag the preset into the rundown and assign it to a channel/layer.

  4. Use:

    • F3 to load

    • F2 to play (animate in)

    • F1 to stop (animate out)

    • F6 to update text/logo live while the graphic is on air

Logos are just image URLs – anything your CasparCG HTML can load in a browser. You can tweak the logo scale field to match different logo sizes.

Because presets store all the field values, you can build a full show rundown of names, titles, and logos and just step through them during the broadcast.

Using the Lower Third on the ATEM

On the ATEM:

  • Route fill and key from the UltraStudio into two SDI inputs (e.g. 19 = fill, 20 = key).

  • In an Upstream Keyer, set:

    • Key type: Luma (or as appropriate)

    • Fill source: input 19

    • Key source: input 20

    • Key mode: Pre-multiplied

Once you’ve done that, hitting Key On Air overlays the Rive lower third over any camera source. You can switch cameras “under” the graphic, animate it out when needed, and stack multiple layers thanks to CasparCG’s layer system.

Why This Workflow Is Nice

  • Modern design tools: Use Rive to build smooth, vector-based motion graphics.

  • Flexible playout: CasparCG handles SDI, NDI, key/fill, and multiple channels.

  • No manual HTML hacking: The generator reads your .riv file and creates the CasparCG template automatically.

  • Portable graphics: With embedded Rive, a single HTML file can travel between machines without asset headaches.

If you’re already in the Blackmagic ecosystem and want more polished, dynamic graphics without buying a high-end CG system, this Rive + CasparCG approach is a powerful and surprisingly accessible option.