You can create a production-ready CasparCG HTML template without hand-coding HTML, CSS or JavaScript. Falcon Graphics provides a visual browser editor for layers, data fields, keyframes and playout actions, then exports the complete template as one self-contained HTML file.
This guide shows the full workflow for a lower third, from blank composition to a template that can be loaded and controlled by CasparCG.
Why CasparCG HTML templates usually feel technical
CasparCG renders HTML graphics in a browser engine. A hand-built template normally combines visual markup, CSS, animation code, data parsing and global callbacks that a client can call. The developer also needs to package fonts and images correctly and test transparency at the target resolution.
The official CasparCG Server includes an HTML producer and a configurable template directory. It can add, play, update, stop and remove templates through its control commands. The difficult part is creating a template that responds predictably to those commands.
Falcon Graphics generates that technical layer during export. You work with broadcast concepts instead: composition, layers, actions, keyframes and operator data.
Step 1: choose the composition format
Start a project in Falcon Graphics. Choose a preset such as 1920 × 1080 for 16:9 production, 1080 × 1920 for vertical video, a square or portrait format, or enter a custom resolution. Set the frame rate used by the timeline.
For a conventional HD CasparCG channel, 1920 × 1080 at the same frame rate as the channel is a sensible starting point. Matching the composition to playout avoids unexpected scaling and timing differences.
Step 2: start from scratch or use a template
A blank project gives full control. The included library gives a faster route to a working design, with more than 30 editable templates for lower thirds, news, sports, weather, finance, events and fullscreen information.
If speed matters, see 30+ Free CasparCG and OGraf Templates for Live Production. Every template remains editable; it is a starting point, not a locked preset.
Step 3: build the graphic with layers
- Text: names, titles, scores, labels and headlines.
- Shape: panels, accent bars, masks and simple brand elements.
- Image: logos, portraits, icons and uploaded assets.
- Iframe: content from another allowed web address.
- Code frame: isolated custom HTML and JavaScript where a specialist element is needed.
- Live Data: values fetched directly from a URL or API by the graphic.
- Video: supported video sources controlled as part of the graphic lifecycle.
Move and resize layers directly in the viewport. Use safe-area guides, layer locking, visibility controls and precise transform values to keep the composition production-safe.
Step 4: animate on the visual timeline
Place the playhead, select the properties a keyframe should remember and change the values at another frame. Position, width, height, rotation, opacity, size, blur, skew, crop and other supported values can be animated.
Choose easing curves for the movement or use quick fade, slide and pop transitions. Motion blur can be added to moving layers. Multi-step graphics can add intermediate states that advance on repeated play or next commands.
Step 5: define the playout lifecycle
A broadcast template must know what to do when the controller sends a command. Falcon Graphics maps the designed timeline to the exported runtime:
- Load: prepare the graphic without showing the on-air state.
- Play: run the IN transition to the first step.
- Next: advance to the next step where one exists.
- Update: apply incoming data at the designed data-swap marker.
- Stop: run the OUT transition.
- Remove: clean up the graphic when the controller removes it.
The HOLD state waits for the next command; its apparent timeline width is editing space, not a fixed on-air duration. The operator decides how long the graphic remains visible.
Step 6: create editable data fields
Open the OGraf Data panel and add fields such as Name, Title, Score or Team color. Each field has a key, label, value type, control type, default value and description.
Bind the field to the relevant property. Data binding is not limited to text content: it can control the position, dimensions, opacity, visibility, font, color, image source and other visual values exposed by a layer.
Read the guide to OGraf Data binding and JSON for a complete data model and update example.
Step 7: preview the real controller actions
Use the action preview before export. Enter test values, load the graphic, play it, advance through steps, send an update and stop it. This catches timing, overflow and data-binding problems while the project is still editable.
Step 8: export one self-contained HTML file
Choose Export HTML. Falcon Graphics places the design, animation runtime, project assets and control callbacks in one file. You do not need to install Falcon Graphics on the playout machine.
Copy the exported file into the template folder configured in casparcg.config. The standard CasparCG configuration uses a template-path, but the exact location can be changed by the system administrator.
Example controller data
A controller can send a JSON object whose keys match the fields created in the editor. A simple lower third update could look like this:
{
"name": "Sofie Hansen",
"title": "Graphics Designer"
}The exported template validates and applies those values to the bound properties. Keep field keys stable after a controller or rundown system has been configured to use them.
Common mistakes to avoid
- Wrong resolution or frame rate: match the CasparCG channel where possible.
- Fonts missing on playout: embed selected Google Fonts or uploaded fonts in the project before export.
- Text overflow: configure minimum width, maximum width, padding and automatic shrinking.
- Data swapped at the wrong moment: place the update marker after the outgoing value is hidden and before the incoming value returns.
- Untested callbacks: use the action preview for load, play, next, update and stop.
Frequently asked questions
Do CasparCG HTML templates require JavaScript?
A hand-coded template normally uses JavaScript for data and playout callbacks. Falcon Graphics generates that runtime during export, so the designer can work visually.
Where do I place the exported HTML file?
Place it in the template directory configured for your CasparCG Server. The exact path depends on your installation and the template-path value in casparcg.config.
Can the template receive data from CasparCG?
Yes. Create OGraf Data fields in Falcon Graphics, bind them to visual properties and test the values before export. The exported template accepts controller updates.
Can a CasparCG template have multiple steps?
Yes. Falcon Graphics supports a multi-step model. The first play displays step one, and subsequent play or next commands can advance through the designed steps.