From JSON to MP4 in the Browser: Zero-Server Video Export

Shipping a video automation feature usually comes with a heavy infrastructure tax. Whether you are building personalized marketing clips, automated social media posts, or a SaaS dashboard recap, the traditional approach involves spinning up a fleet of headless servers, managing complex FFmpeg queues, and paying for every CPU-intensive minute of rendering.

But what if you could offload that entire rendering pipeline to the user's browser?

With the rise of the WebCodecs API and modern browser-side rasterization, the server is no longer a requirement for high-quality video export. In this post, we’ll explore how to use VideoFlow to generate professional MP4 files entirely on the client side—saving you thousands in infrastructure costs while providing a more private, instant experience for your users.

The Infrastructure Tax of Video Rendering

For years, programmatic video has been synonymous with server-side processing. Tools like FFmpeg or headless Chromium instances (often used by frameworks like Remotion) do the heavy lifting in the cloud. While powerful, this architecture introduces three major friction points:

1. Scalability Costs: Rendering video is expensive. As your user base grows, so does your AWS bill.
2. Latency: Users have to wait for a job to be enqueued, processed, and uploaded to a CDN before they can see the result.
3. Data Privacy: Uploading user assets (images, private data) to a server for rendering can be a compliance hurdle for many enterprise applications.

VideoFlow was designed to solve this by making the rendering engine portable. Because VideoFlow represents scenes as a standard VideoJSON document, the same video can be rendered byte-for-byte identically on a server or right in the user's browser tab.

Meet @videoflow/renderer-browser

The @videoflow/renderer-browser package is an Apache-2.0 licensed engine that turns your browser into a video production studio. It doesn't just "record the screen"; it uses a frame-accurate rasterization pipeline to ensure every transition, effect, and keyframe is rendered at full quality.

Under the hood, the browser renderer performs a series of sophisticated steps:

• DOM-based Rasterization: It uses SVG <foreignObject> to rasterize layers (like text and shapes) into high-resolution bitmaps.
• WebGL Compositing: It applies any of the 42 GLSL effects (like bloom, frostedGlass, or chromaticAberration) using the GPU.
• WebCodecs Encoding: It pipes the final frames into the browser’s native hardware-accelerated encoders via the WebCodecs API (orchestrated by the MediaBunny library) to produce a standard H.264 MP4.

This means the heavy lifting of encoding the video happens on the user's machine, not your server.

Implementation: Exporting Video in 20 Lines

To get started, you simply need the @videoflow/core builder and the @videoflow/renderer-browser package. Unlike server-side rendering, there is no need to install Playwright or manage a Chromium binary—the browser already has everything it needs.

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 with a transition
const bg = $.addImage(
  { fit: 'cover' }, 
  { source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' }
);

const title = $.addText({
  text: 'Zero-Server Export',
  fontSize: 8,
  color: '#FF5A1F',
  position: [0.5, 0.5]
}, {
  transitionIn: { transition: 'blurResolve', duration: '800ms' }
});

$.wait('3s');

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

// Download the result
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.mp4';
a.click();

In this example, the blurResolve transition and any potential effects are calculated on-the-fly. The user sees a progress bar, and within seconds, they have a professional MP4 file ready to share—all without a single byte being processed on your backend.

When to use Browser Export

While browser-side export is revolutionary for cost-saving, it’s important to choose the right tool for the job. Our renderers guide breaks down the trade-offs, but generally:

• Use Browser Export when you have a user-facing application where the user is already "present" (e.g., a video editor, a social media tool, or a dashboard). It’s perfect for lowering costs and improving privacy.
• Use Server Export (via @videoflow/renderer-server) for batch jobs, scheduled tasks, or when you need to generate videos in the background without a user session.

Because VideoFlow is resolution-agnostic (using em units where 1em = 1% of the canvas width), you can even let users preview a low-res version in the Playground and then trigger a high-quality 4K export using the same JSON.

Conclusion

The gap between "code" and "video" is closing. By moving the rendering pipeline to the edge—specifically into the user's browser—we can build video-centric applications that are faster, cheaper, and more scalable than ever before.

If you're ready to stop fighting with FFmpeg strings and start building cinematic video pipelines with TypeScript, check out the VideoFlow documentation or explore the source on GitHub.

Whether you're building a YouTube Shorts factory or a personalized SaaS recap, VideoFlow gives you the tools to ship professional video features without the infrastructure headache.