Props dataĬontains the data sent by CasparCG. The only thing different from a 'normal' React component, is that you have one extra lifecycle method, and a two extra props. If you know React, you already know almost everything you need to know. Note: you have to stop webpack and run yarn start again for it to pick up your new template. Then add an index.js file in the folder you just created,Īnd make sure it exports a React Component, and you're done! 💫 Start by adding a new folder to your src/templates folder, with the name of your new graphic. Your graphics are now ready to be played in CasparCG! Developing Graphics

Tip: use -include (shorthand -i) or -exlude (shorthand -e) to control which graphics get built. It correctly bundles React in production mode and optimizes the build for the best performance, and then inlines every graphic into its own HTML file. npm run build or yarn buildīuilds your graphics for production to the dist folder. The page will automatically reload if you make changes to the code.Īnd you will see the build errors and lint warnings in the console.

play, pause, stop) and change background. Use the GUI to view your graphics, change their preview data, send commands (e.g. Inside the newly created project, you can run some built-in commands: npm start or yarn startĮvery template that you've added to the /templates folder will automatically be picked up, and turned into a CasparCG template that you can interact with.

Casparcg tutorial