Caspar Graphics

Caspar Graphics is a tool for building, testing and packaging HTML graphics for CasparCG using code. We created Caspar Graphics to make it easier for ourselves to build and maintain graphic packages. It offers a number of key benefits for people looking to create graphics efficiently and effectively:

• A simple and intuitive UI makes it easy to interact with your graphics — send data updates, play and stop animations, and view all of your graphics together to make sure they're positioned properly.
• No configuration is needed with out-of-the-box support for TypeScript, JSX, CSS and more.
• Lightning Fast HMR (Hot Module Replacement) enables you to quickly see your changes as they're made.
• Connect to a CasparCG server to easily test your graphics in a production environment.
• Package your graphics into an optimized bundle, ready to be played in CasparCG.

We've built Caspar Graphics on top of Vite, which offers fast and reliable performance with no need for configuration. This means that you can benefit from most of those features as well.

Read the Docs to Learn More.

CHANGELOG

v3.0.0

Added better support for building responsive graphics. See https://gfx.nxtedition.com/docs/responsive for more information.

Breaking:

All fixed size graphics need to specify their width and height in manifest.json. E.g. if your existing graphics only support being played in 1920x1080 pixels, you should add this to each graphic's manifest.json file:

{
  "width": 1920,
  "height": 1080
}