Guide Overview

An overview of what the HTML template guide includes.

Welcome to the HTML Template guide for CasparCG! The goal of this guide is to provide you will all prerequisites and knowledge for creating high quality HTML templates as well as walk you though a basic example and some advanced concepts.

This Guide Will Cover

Where to start if you have zero developing experience.
Reference links for installing and setting up a CasparCG Server.
How to create HTML graphics that can handle a variety of situations.
Some advanced concepts for making HTML templates more diverse.

This Guide Will Not Cover

How to install or setup the CasparCG Server. But, we will provide you will some download links and resources.
Other production related devices that can be controlled or connected to by CasparCG ( Including Decklink or Atem setup )

About this Guide

The word template and graphic will be used interchangeably.
We won't show all the code in each code snippet. Most of the time, the code will be abbreviated like in the following example. Please do not replace the previous code with the comment. We recommend cloning the GitHub repository if you want to copy and paste since there are no abbreviations.

function someFunction() {
    const string = "I'm a big block of variable declarations";
    const antherString = "Me too!!!!"
}

// In another code block later in the guide

function someFunction() {
    /* Variable declarations */
    
    const hasAnA = string.includes("a");
    if(hasAnA) console.log('Yep, there is an A');
}

Ending Goal

Our goal in this guide is to create a single lower third using HTML, CSS, and JS that works with CasparCG. Our finished graphic will look like the image attached below.

Although this is a basic graphic, it will provide us with the knowledge needed to scale up to a graphic of any size and complexity.

Contributors Wanted!

If you have completed this guide and would like to contribute any updates please contact me!

Resources

The completed HTML Template code in this guide on GitHub's website.

NextPrerequisites

Last updated 3 years ago

Was this helpful?

function someFunction() { const string = "I'm a big block of variable declarations"; const antherString = "Me too!!!!" } // In another code block later in the guide function someFunction() { /* Variable declarations */ const hasAnA = string.includes("a"); if(hasAnA) console.log('Yep, there is an A'); }