Guide Overview
An overview of what the HTML template guide includes.
Last updated
Was this helpful?
An overview of what the HTML template guide includes.
Last updated
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.
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.
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 )
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.
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.
If you have completed this guide and would like to contribute any updates please !
The completed code in this guide on GitHub's website.