Basic CasparCG HTML template tutorial

The goal of this tutorial will be to create a new graphic template and converting it to HTML format compatible with CasparCG using Loopic. Our final graphic should look like the graphic on the next animation. The final result of the tutorial

Final result of this tutorial is also available as a demo project on Loopic - you can load it by clicking on it in the Welcome popup.

There is also a video version of the tutorial available on YouTube. YouTube tutorial

Creating background elements

3 background elements will be created before adding text, and those are Shape elements. To create new shapes, click on the Plus button in the Timeline section and select Shape. Two shapes have just decorative purpose and the third one is there to serve as a background to our text which will be added. Creating new Shape elements

You can easily resize and reposition shapes and change their background color. Changing background color of Shape elements

As we are designing our lower third graphic with a white background, there is a problem - we can not see the white shape anymore because the composition background is white by default. This can be easily changed in the settings panel - pick any color of your choice. Changing composition background color

Repositioning and renaming layers techniques are very simple in Loopic. Repositioning and naming layers

Importing a background image

It is always a good idea to add an example background image, just for design and development purposes. This way we can estimate the final look of the graphic once it is played on-air. In this tutorial, we will create a new Image layer and select our background image. Once it is imported, we will lock it by clicking the lock icon and setting the layer as a guide. To set the layer as a guide, right-click on it and choose Set as a guide. This is important because layers marked as guides will not be exported from the project. We will also change layer's order so that our guide is the last layer. Importing image, locking and setting as guide

Adding Text elements

Adding Text elements is as simple as adding Shape elements. But key detail here is that our fields need to have unique ID names so we can identify them - in other words, we need to know what information to show in what text element.

We will name the name element as "title" and subtitle as "subtitle". Using underscore prefix is not required, however, it is recommended and it is the convention of naming text elements in CasparCG world.

Creating new Text elements

Adding fonts

Adding fonts is very simple in Loopic. All you need to do is click on the Plus button in the Fonts section of the Resources panel and select the fonts. Once imported, the fonts will appear in the fonts dropdown list. In this example, we used Exo 2 Regular and Exo 2 Bold fonts, so both fonts should be imported. Importing custom fonts

Saving the project

Since we have already done some nice work with Loopic, it is always recommended to save the project occasionally. Saving Loopic project


Here you are free to do anything you want - slide up, down, left, right, fade-in, cut, dance, fly… Whatever!

In the Timeline panel, click on the little arrow to open all available properties and start adding keyframes, moving them, deleting them. First keyframes in Loopic

We will try to animate white background shape to slide from the bottom to the top from frame 0 to frame 15. From frames 40 to 60, the shape will fade out. Basic Loopic animation

Few more minutes of playing and here is our final animation. Animation example

Adding stop action

So far everything looks good, but how are we going to tell CasparCG when to stop the graphic and when to wait for the outro command? It is as simple as navigating to frame 40, which will be our "stop" keyframe, and clicking the "Stop & Outro" button. That's it! Stop and outro action

For more information about actions, take a look at the dedicated tutorial just for actions.

Last preparations

Just the last step before we export our graphic - we must give a name to our composition. We will name it "lower-third" instead of "New composition" - sounds much better. This name will also be used as a name for our exported graphic. Renaming composition


And this is the best part of Loopic - exporting your composition as a graphic for CasparCG is as simple as clicking the "Export as CasparCG graphic" button! In a few moments, Loopic will generate a .html template with all the resources embedded directly in the HTML document, so you do not have to worry about copying images, installing fonts, and so on. Exporting Loopic project as CasparCG template

Playing with CasparCG

Now just move the file Loopic has exported to the CasparCG templates folder - or any other folder where CasparCG looks for templates. With any client application of your choice, you can now play the graphic by its name and send dynamic information to it by setting the template data keys to the IDs which we assigned to our text elements.

And that is it!

If you have any questions or problems, feel free to contact the Loopic team anytime. You can also reach us on social networks Facebook and Instagram - links are in the footer.

Credits for the background image go to:

  • Business photo created by jannoon028 -