Zero-Server Video Export: Rendering MP4s in the Browser with WebCodecs

Generating video at scale is usually a nightmare for your infrastructure budget. Traditionally, if you wanted to allow users to export a personalized video, you had to queue a job on a server, boot up a headless browser or FFmpeg instance, wait for the render to finish, and then upload the result to an S3 bucket. At scale, this means managing GPU clusters or massive CPU pools just to keep up with demand.

But what if you could offload the entire rendering process to the user's own device?

With the arrival of the WebCodecs API in modern browsers, this is no longer a futuristic dream. Using VideoFlow, you can now render high-quality MP4s directly in a browser tab. This approach effectively reduces your infrastructure costs to zero while giving users an instant, private, and high-performance export experience.

The Browser as a High-Performance Renderer

VideoFlow was built from the ground up to be renderer-agnostic. While it supports headless server-side rendering, the @videoflow/renderer-browser package is the secret weapon for SaaS builders and content automation platforms.

Instead of piping frames through a network, VideoFlow uses a per-layer rasterization pipeline that runs entirely client-side. Each layer in your VideoJSON is rasterized, effects are applied via WebGL, and the result is fed into a Web Worker where the WebCodecs API handles the heavy lifting of H.264 encoding.

Compared to moving from Remotion to VideoFlow, where you might be used to a React-heavy runtime, VideoFlow’s JSON-first architecture makes this process lightweight and predictable.

Implementing Client-Side Export in 15 Lines

The beauty of VideoFlow is its simplicity. You don't need to manage workers or canvas contexts manually. The core library handles the orchestration for you. Here is how you can set up a browser-side export in a few lines of TypeScript:

import VideoFlow from '@videoflow/core';
import '@videoflow/renderer-browser'; // Registers the browser renderer

const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });

// Create your scene
$.addText({ 
  text: 'Your Video is Ready', 
  fontSize: 6, 
  color: '#FF5A1F' 
}).fadeIn();

$.wait('3s');

// Render directly to an MP4 Blob
const blob = await $.renderVideo({
  onProgress: (p) => console.log(`Rendering: ${Math.round(p * 100)}%`),
});

// Trigger a download
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'my-video.mp4';
a.click();

This snippet runs in any modern browser tab. It compiles the timeline, rasterizes the frames, encodes the video, and triggers a download—all without a single request hitting your backend.

Handling Progress and User Experience

When rendering in the browser, providing feedback to the user is critical. Since the process uses the user's hardware, they need to know it's working and have the ability to stop it if necessary. VideoFlow provides built-in support for AbortController and progress callbacks.

const controller = new AbortController();

try {
  const blob = await $.renderVideo({
    signal: controller.signal,
    onProgress: (p) => {
      updateProgressBar(p * 100);
    }
  });
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('Render cancelled by user');
  }
}

// Cancel the render from a UI button
cancelButton.onclick = () => controller.abort();

This level of control allows you to build professional-grade video editors inside your application. In fact, our React Video Editor uses this exact mechanism to provide a seamless export experience for end-users.

When to Use Browser Export

While our three official renderers each have their place, the browser renderer is the clear winner for several key use cases:

1. Personalized SaaS Recaps: Generate "Year in Review" videos for your users without paying for thousands of hours of server time.
2. User-Generated Content (UGC): Let users add stickers, text, and music to their videos and export them for social media instantly.
3. Privacy-First Video Tools: Since the video never leaves the user's machine, it's the perfect solution for sensitive internal data or health-tech applications.
4. Interactive Previews: Use the browser renderer to give users a high-fidelity preview before they commit to a final (perhaps higher resolution) server render.

Zero Servers, Infinite Scale

By moving the rendering logic to the edge—the user's browser—you eliminate the biggest bottleneck in video automation: the server. You no longer need to worry about queue depth, auto-scaling groups, or FFmpeg licensing. Your application scales linearly with your user base, and your infrastructure bill stays flat.

Ready to see it in action? Head over to the VideoFlow Playground to build and export a video right now, or check out the full documentation to start integrating browser-side export into your own apps.

If you find VideoFlow useful, don't forget to star us on GitHub!