CasparCG HTML Template Guide
  • Guide Overview
  • Prerequisites
  • CasparCG Server Setup
  • Development Setup
  • AMCP Commands Review
  • HTML & SCSS
    • File Setup
    • Creating the HTML
    • Create the SCSS
  • JavaScript
    • Setting up the JS File
    • Handling Updates
    • An Overview of GSAP
    • Animating In & Animate Out
    • Advancing & Removal
    • Custom Commands ( Optional )
  • Final Thoughts
  • Resource List
Powered by GitBook
On this page
  • This Guide Will Cover
  • This Guide Will Not Cover
  • About this Guide
  • Ending Goal
  • Contributors Wanted!

Was this helpful?

Guide Overview

An overview of what the HTML template guide includes.

NextPrerequisites

Last updated 3 years ago

Was this helpful?

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 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!

Resources

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

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

GitHub repository
contact me
HTML Template
Finished HTML Template