Render Video Workflow

Rendering is the process of capturing a composition frame-by-frame and encoding it into a video file (e.g., MP4). This is done using the @helios-project/renderer package in a Node.js environment.

The quick path: one command

npx -y @helios-project/cli@latest render composition.html -o output.mp4

• The duration, fps and size come from the composition's window.helios. To set them yourself, pass --duration, --fps, --width and --height.
• A page that draws itself with window.renderAt(t) needs --duration.
• --audio track.mp3 adds a soundtrack.
• A plain HTML file renders directly from disk. If a bundler has to build the composition, run npm run dev and pass its URL instead.

Use the script below only when you need a custom pipeline, such as input props, several audio tracks, or progress callbacks.

1. Prerequisites