Rendering and export

Render in the browser

The advantage of this approach is that you can use the device’s CPU and GPU for rendering, significantly reducing costs by avoiding the need to send all the assets of the composition. This rendering method works on both web browsers and mobile devices.

We use the WebCodecs API for hardware-accelerated encoding and decoding. If your browser does not support the WebCodecs API, we fall back to a WASM-based approach, which is widely supported but slightly slower.

Export video

To export the final video, simply call the export() function, which will return a blob URL for the completed video.

const result = await Engine.getInstance().export();

If the rendering is successful, the result variable will contain the final blob of the video, along with the file extension.

Export options

Pass an options object to control output format, resolution and quality:

const result = await Engine.getInstance().export({
  format: "mp4",          // "mp4" | "webm"
  resolution: 1080,       // vertical pixels: width scales to match the aspect ratio
  videoBitrate: 8_000_000 // bits per second
});

Option	Type	Default	Description
`format`	`string`	`"mp4"`	Container format. `"webm"` is faster but less compatible.
`resolution`	`number`	composition height	Target height in pixels.
`videoBitrate`	`number`	auto	Video bitrate in bps. Higher = larger file, better quality.
`audioBitrate`	`number`	`128000`	Audio bitrate in bps.

Track export progress

Listen to the export:progress event to display a progress bar or percentage:

Engine.getInstance().on("export:progress", (progress: number) => {
  console.log(`Rendering: ${Math.round(progress * 100)}%`);
});

Browser compatibility

Browser	Encoding	Notes
Chrome / Edge 94+	WebCodecs (hardware)	Fastest path. Uses the device GPU.
Safari 16.4+	WebCodecs (hardware)	Supported since Safari 16.4.
Firefox	WASM fallback	WebCodecs not yet shipped; the SDK falls back automatically.
Mobile Chrome / Safari	WebCodecs	Works on modern Android and iOS devices.

The SDK detects capabilities at runtime. You never need to branch on the browser yourself: just call export() and the fastest available path is chosen.

Large files and chunked output

For projects larger than a few minutes, consider enabling chunked output to avoid hitting the browser’s single-blob allocation limit. Chunks can be streamed straight to your server or saved via the File System Access API.