---
source: "https://docs.lumora.live/templates/overview"
url: /templates/overview.md
description: >-
  Templates versus graphics in Lumora: how reusable template designs and the
  graphics created from them relate, and where each lives in the UI.
---

# Templates overview

Lumora's content model has two layers: **templates** and **graphics**. Almost every other part of the UI refers to one or the other, so it's worth learning the difference first.

## What is a template?

A **template** is a reusable design. The artwork, animation, and layout that defines how a graphic looks. Templates are built once (or bought from the Template Library, or commissioned from a designer) and stored in your workspace's template list. They have placeholders for the bits that change at show time: a name, a score, a logo, a row of stats.

A template by itself never goes on-air. It's a blueprint.

Lumora supports three template formats, each suited to different needs:

* **OGraf.** The EBU's open standard for broadcast graphics. Best for designers who want a structured, declarative format with clean separation between design and runtime data.
* **Lottie.** JSON-based animation files exported from After Effects via Bodymovin. Best when the design is animation-heavy and was authored in After Effects.

See [Uploading a template](/templates/upload) for the import process for each.

## What is a graphic?

A **graphic** is an instance of a template, configured for a specific use. The same lower-third template might back twenty different graphics, one per guest you'll introduce during the show. Each graphic has its own:

* **Title.** A short label for the operator to find it in the rundown.
* **Field values.** The actual content (host name, role, sponsor logo URL).
* **Channel and z-index.** Where on-air it goes, and how it stacks against other live graphics.
* **Per-graphic settings.** Auto-out timers, channel locks, named actions.

A graphic is what you actually take on-air with the **Take** button or the HTTP API.

## The relationship in one line

> Templates are the design. Graphics are the things you take on-air.

If you change a template, every graphic built from it inherits the change the next time it's loaded. 

## Why the distinction matters

* **Build once, reuse many times.** Design a single sponsor lower-third template, instantiate it as a graphic for each of the six sponsors in the show.
* **Operator workflow stays simple.** The operator works with named graphics ("Sponsor: Acme", "Lower-third: Host"), not raw templates. The mental model is "pick a graphic, fire it" rather than "configure a template every time."
* **Templates can be versioned and re-used across workspaces.** Buying a template from the [Template Library](/templates/library) gives you the design; you'll instantiate your own graphics from it.

## Where each lives in the UI

* **Templates** are managed in Settings → Assets → User Templates. 
* **Graphics** are managed in the main rundown, on the left sidebar of the control panel. Click **Add Graphic** to instantiate a new one from any template you have access to.

\*\[CG]: Character Generator. AKA graphics overlay engine.
\*\[OBS]: Open Broadcaster Software. Open-source streaming and recording tool.
\*\[SDK]: Software Development Kit.
\*\[API]: Application Programming Interface.
\*\[HTTP]: HyperText Transfer Protocol.
\*\[HTML]: HyperText Markup Language.
\*\[CSS]: Cascading Style Sheets.
\*\[JS]: JavaScript.
\*\[OGraf]: An EBU backed specification for HTML graphics.
\*\[EBU]: European Broadcasting Union.
\*\[NDI]: Network Device Interface. IP-based video transport protocol.