HTML Template Development Widget



An HTML Development Widget

I have been building a few HTML templates lately and found that using Dev Tools Snippets to execute play out commands got a bit slow over time. So, to make running repetitive commands quicker I built a widget for CasparCG HTML Templates.

The main feature is the Play, Next, and Stop Commands as well as the ability to run custom commands (functions) and change the body background color to a HEX, RGB, or RGBA value. The widget saves the data to the browser’s local storage for persistence between reloads and templates.

Here is the GitHub Repo and some screenshots.

Setup instructions are in the README (Only 2 steps). Please feel free to reach out with any suggestions or thoughts!

The Full Widget

Shrunken Controls

Hidden Controls

Editing the Template Data


Version 0.1.0

I finally got the template data feature (and a few others) added! Check out a live demo here.

Here is the Github Repo.

Please feel free to reach out with any questions!


TypeScript Rework

I am rewriting the widget in TypeScript to make maintaining it more manageable. Has anyone got any additional feature requests I can add during this process? Any bugs to report? Thank you!