Skip to main content


In Loopic, Actions are pieces of code that are executed either once your template gets loaded or at any desired frame.

Why Actions?

You may be wondering what the word "code" has to do in the software made for creating graphic templates. Loopic is an app specially made for creating HTML graphic templates, and graphic templates are not something that can be exported to a file such as a video or an image. We need to be able to modify the content of those, for example, we may want to change the content of the Text element to the name of the presenter of the show. And that is the most basic example.

Now, what if you want to bold the second word in the Text element, so that the first name of the presenter is in regular weight, and the last name is in bold? Or, what if we want to change the color of the text? In case we are creating a template for the tactical lineup of the sport graphics, how are we going to change the positions of the players on the screen? Well, we need some logic there.

And this is where Loopic Actions come to the rescue - they allow us to write some custom logic.

How do I write Actions?

Since Loopic and templates exported from Loopic are HTML-powered, Javascript is the language that should be used to write Actions. How advanced knowledge of Javascript you need to have depends on your needs and what you want to achieve, but generally speaking, you don't need to be a power user or experienced programmer - Loopic Actions API is specially designed to reduce the complexity of the code.

More about Actions

Actions can be written as Composition actions or as Frame actions, and those are detailly explained in the API section of the documentation.