Zero-Cost Video Rendering: How to Export MP4s Directly in the Browser

Exporting video has traditionally been a "server-side problem." Whether you are using FFmpeg shell scripts or a React-based solution like Remotion, the standard architecture involves spinning up a headless browser on a GPU-accelerated instance, capturing frames, and piping them into an encoder. This works, but it’s expensive, complex to scale, and introduces significant latency between a user clicking "Save" and receiving their file.

What if you could shift that entire workload to the user's browser?

With VideoFlow and the WebCodecs API, zero-cost video rendering is no longer a hypothetical. You can now generate professional, frame-accurate MP4 files directly in the client’s browser tab with zero server overhead.

The Scalability Wall of Server-Side Rendering

If you're building a SaaS that generates personalized videos—like a "Year in Review" for your users or automated product demos—your biggest bottleneck is usually the render queue. Each concurrent render requires dedicated CPU and RAM. As your user base grows, your infrastructure costs grow linearly with it.

Furthermore, server-side rendering often requires moving large assets (4K images, raw video clips) across the network twice: once to your render worker, and once to your storage bucket.

By using the VideoFlow renderers, specifically the @videoflow/renderer-browser package, you flip the script. The user’s machine becomes the render node.

How it Works: WebCodecs and MediaBunny

Under the hood, VideoFlow’s browser renderer leverages the modern WebCodecs API. This allows the browser to access hardware-accelerated H.264 and VP9 encoders directly. Instead of recording a screen or using a slow software encoder, VideoFlow rasterizes each frame of your VideoJSON document and feeds it into a high-performance encoding pipeline.

The process looks like this:

1. Rasterization: VideoFlow turns your layers (text, shapes, images) into bitmaps using a high-speed SVG-based pipeline.
2. Composition: These bitmaps are layered onto an OffscreenCanvas.
3. Encoding: Each frame is sent to the WebCodecs encoder.
4. Muxing: The resulting video chunks are muxed into an MP4 container using MediaBunny.

The result is a byte-for-byte identical video to what you would get from a server render, produced locally in seconds.

Implementation: Exporting Video in 20 Lines

The beauty of VideoFlow is that the same code you use for a live preview can be used for the final export. You don't need to learn a new API to move from the Playground to a production export tool.

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

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

// Add a background and a title
$.addImage({ fit: 'cover' }, { source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' });

const title = $.addText({
  text: 'Zero-Cost Export',
  fontSize: 8,
  color: '#FF5A1F',
  position: [0.5, 0.5]
});

// Apply a transition and some effects
title.fadeIn('800ms');
$.wait('3s');

// Export the MP4 directly to the user
const blob = await $.renderVideo({
  outputType: 'blob',
  onProgress: (p) => console.log(`Exporting: ${Math.round(p * 100)}%`)
});

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

In this snippet, the entire rendering process happens inside the user's browser tab. There is no call to an external API, no FFmpeg binary to manage, and no cloud bill to pay.

Why This Matters for Modern Apps

1. Privacy by Design

Since the video is rendered locally, sensitive user data (like names, account balances, or private photos) never needs to leave the client’s device. This makes VideoFlow an ideal choice for fintech, healthcare, or any privacy-conscious application.

2. Instant Feedback

Users don't have to wait in a "render queue." The moment they hit export, their own hardware starts the job. For 10-second social media clips, the export is often faster than the time it would take to upload the assets to a server.

3. Infinite Scalability

Your rendering "cluster" is as large as your user base. If 10,000 users hit export at the same time, you don't need to scale your infrastructure—you just need to make sure your static assets are served via a CDN.

Getting Started

Whether you are looking for Remotion alternatives that offer a more portable JSON format or you're tired of managing complex FFmpeg pipelines, VideoFlow provides a typed, developer-friendly way to build video.

Check out our getting started guide to see how you can integrate VideoFlow into your next project. If you want to see the source or contribute to the core, visit the VideoFlow GitHub repository.

For more on why we believe in this portable approach, read our previous post on why JSON is the future of video editing.