Build a JS package

In addition to live testing in the simulator, you can also build a composition as a JavaScript library bundle, which you can then load into your own web app:

yarn build-browser daily:baseline

The second argument here is a composition ID.

The JS library is written into the build subdirectory.

The file name contains the composition ID with the colon replaced by and underscore. For example:


To load the composition in a web application, load the .js file using a script tag in your HTML loader. Then you can access the VCS composition library using a global variable that contains the composition ID, like so:

const vcsLib = window.VCSComposition_daily_baseline;

The library provides a single function named startDOMOutputAsync. It takes a container DOM element (where your VCS rendering will be directed), a viewport size, input image descriptions, and a few other arguments. It then returns an API object that lets you send commands data to the live VCS composition.

The easiest way to find out about this API is to read the VCS Simulator's source code, as it uses this exact mechanism to load up the composition and send data to it. The VCS Simulator source is at devrig/vcs-rig.html.