Documentation
Introduction

Introduction

Caspar Graphics is a tool for building, testing and packaging HTML graphics for CasparCG (opens in a new tab) using code. It also includes building blocks for some common use cases.

The UI for Caspar Graphics

Why Caspar Graphics?

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:

Scaffolding a new project is super fast and you'll be up and running in just a matter of seconds.

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 (opens in a new tab), which offers fast and reliable performance with no need for configuration. This means that you can benefit from most of those features as well.