Using React for templates and playing them in caspar

General
1

Has anyone succesfully created html templates in React and been able to play them in casparcg?

I have used above and really like the dev environment. I’ve created templates with it using framermotion and chakra.ui alongside but I just can’t get them to play without caspar throwing play and update not defined even though this should handle the states for you.

If you have experience with above or other ways of using react for templates would love to hear tips and examples. Thanks!

2

you need to define some function for CasparCG to work properly:
-update(data) : executed for first when you play the template, with custom input data from the client
-play() : executed right after “update(data)”
-next() : executed when you press “next” on the client
-stop() : executed when you press “stop” on the client

other than that you can define any function you need and execute it with the “invoke” command and the name of the function

you may want to search on the forum, there are some detailed explanation and instruction about html template. But I cannot find them right now

3

@indr has written very good tutorials. See here.

1 Like
4

Thanks for the replys. I’ve managed to create vanilla js templates succefully and defining the needed functions there. So based on your comments am I correct to assume that there’s no fundamental difference when I use React?

5

as far as I know it just depends on the Chrome version in your CasparCG server

2.3.3 LTE uses 71.0.3578
newer developer versions are on 95

and usually you will expect to have al older version of Chrome built in the server in respect of the actual browser.

So it could be handy to use Chrome 71 for all the work and later test on the server.
Bare in mind that play() will not be executed, you may need to make something like this:

if (!window.caspar) {
    play();
}
6

can not npm start…