The CasparCG Widget is a drop in script that creates a small on screen widget which will interact with your HTML Templates. It is written in TypeScript and the converted JS file is called dev.js and can be found in the dist folder.

Join the discussion on the CasparCG Forum.

Change the background color quickly using a color keyword, HEX, RGB or, RGBA values without editing the CSS file.
Set the background to an image using a URL.
Run custom commands (Invoke Command) from the widget.
Easily run the standard Update, Play, Next, and Stop Commands.
Set custom data with a convenient GUI that is injected into the graphic template's update function.
Save multiple data sets for templates that require more than the initial update data.
All data is persistent between page reloads!

Try the live demo here!

You can load the dev.js file directly in your HTML by adding the following line.

<script rel="application/javascript" src="http://yourwebserver/dev.js"></script>

Then visit the template's URL with ?debug=true as the query string.

Example: http://localhost:3000/html/template.html?debug=true

To develop the widget itself, you will need NPM installed and then to follow these two additional steps.

1. Run npm install in a command prompt in the root folder of this repo.
2. Run npm run-script start to launch the WebPack Dev Server.

The development server should now be live at http://localhost:3000.

The widget offers a full API for interacting with the widget itself.
For the full list, type _widget.help into the console.

This was built for CasparCG version 2.2.0 Stable.
The Chromium version for CasparCG is 63.0.3239.132 and the widget was built in version 63.0.3239.0 which can be found here.
Find Chromium download by version here. The Branch Base Position is the folder on this page.

Please reach out with additions, suggestions, improvements or really anything!