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:
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:
daily_baseline.bundle.js
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 vcsComp = 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.
Please refer to the VCS web renderer API documentation for more information for how to use the vcsComp object.
A practical way to learn more 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 is a single-file HTML+JS application without a build step, so its source is entirely in devrig/vcs-rig.html.