# Using React for templates and playing them in caspar

**URL:** <https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404>\
**Category:** General\
**Created:** [February 2, 2023, 7:54pm UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404 "2023-02-02T19:54:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![yogi](https://casparcgforum.org/letter_avatar_proxy/v4/letter/y/46a35a/32.png) [@yogi](https://casparcgforum.org/u/yogi)\
**Post date:** [February 2, 2023, 7:54pm UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/1 "2023-02-02T19:54:27Z")

</div>

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

> **[GitHub - nxtedition/create-caspar-graphics](https://github.com/nxtedition/create-caspar-graphics)**
>
> Contribute to nxtedition/create-caspar-graphics development by creating an account on GitHub.

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!

---

<div class="post-metadata">

**Author:** ![Andrea](https://casparcgforum.org/user_avatar/casparcgforum.org/andrea/32/775_2.png) [@Andrea](https://casparcgforum.org/u/Andrea)\
**Post date:** [February 3, 2023, 9:21am UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/2 "2023-02-03T09:21:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [February 3, 2023, 9:44am UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/3 "2023-02-03T09:44:45Z")

</div>

> [@Andrea](#):
>
> 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

@indr has written very good tutorials. See [here](https://casparcgforum.org/t/introduction-to-casparcgs-html-producer/1386).

---

<div class="post-metadata">

**Author:** ![yogi](https://casparcgforum.org/letter_avatar_proxy/v4/letter/y/46a35a/32.png) [@yogi](https://casparcgforum.org/u/yogi)\
**Post date:** [February 3, 2023, 12:45pm UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/4 "2023-02-03T12:45:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Andrea](https://casparcgforum.org/user_avatar/casparcgforum.org/andrea/32/775_2.png) [@Andrea](https://casparcgforum.org/u/Andrea)\
**Post date:** [February 3, 2023, 2:50pm UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/5 "2023-02-03T14:50:24Z")

</div>

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:

```auto
if (!window.caspar) {
    play();
}

```

---

<div class="post-metadata">

**Author:** ![tue](https://casparcgforum.org/letter_avatar_proxy/v4/letter/t/4491bb/32.png) [@tue](https://casparcgforum.org/u/tue)\
**Post date:** [February 10, 2023, 3:04pm UTC](https://casparcgforum.org/t/using-react-for-templates-and-playing-them-in-caspar/5404/6 "2023-02-10T15:04:37Z")

</div>

can not npm start…