The Three-Renderer Strategy: How to Preview, Export, and Automate Video with One JSON

Building a video pipeline usually involves a painful trade-off: do you want a fast preview in the browser, or a high-quality render on the server? Usually, these are two different codebases—one using a web framework for the UI and another using FFmpeg or a cloud API for the final export. The Three-Renderer Strategy changes this by treating video as portable data, allowing you to use the same logic for live previews, client-side exports, and server-side automation.

At the heart of this approach is the idea that a video shouldn't be defined by a sequence of commands, but by a state. In VideoFlow, that state is VideoJSON. Because the video is just data, it can be passed between different environments—a React component, a browser worker, or a headless Node.js process—and render identically every time.

Why Your Video Pipeline Should Be Environment-Agnostic

In traditional video automation, the 'source of truth' is often fragmented. You might have a template in After Effects, a preview built with HTML/CSS for the user, and a rendering script that reconstructs the scene in FFmpeg. This lead to 'rendering drift'—where the final MP4 doesn't quite match what the user saw in the preview.

By adopting a programmatic video storage strategy, you ensure that the video's definition is decoupled from the rendering engine. Whether you are generating a personalized welcome video or a complex data visualization, the logic remains in your TypeScript builder, and the output is a portable JSON document.

The Three Renderers: DOM, Browser, and Server

VideoFlow provides three official renderers, each optimized for a specific part of the developer workflow. They all consume the same VideoJSON produced by the VideoFlow Core builder.

1. The DOM Renderer: Frame-Accurate Preview

The @videoflow/renderer-dom is designed for the user interface. It renders the video directly into a DOM target, providing a 60fps live preview that supports frame-accurate scrubbing. This is what powers the VideoFlow Playground and the <VideoEditor /> component.

2. The Browser Renderer: Zero-Cost Client-Side Export

When a user hits 'Save', you don't necessarily want to spin up a server. The @videoflow/renderer-browser uses WebCodecs to encode the video directly in the user's browser tab. This is worker-accelerated and produces a high-quality MP4 without costing you a cent in server compute.

3. The Server Renderer: Headless Automation

For batch jobs, scheduled tasks, or API-driven workflows, the @videoflow/renderer-server runs in Node.js. It drives a headless Chromium instance to render the same VideoJSON. By default, it uses a specialized WebCodecs + MediaBunny pipeline that requires no FFmpeg dependency, making it incredibly easy to deploy in serverless environments.

Implementing the Strategy

Implementing the Three-Renderer Strategy starts with the @videoflow/core builder. You define your scene once, and then choose your renderer based on the context.

import VideoFlow from '@videoflow/core';

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

// Define a cinematic intro
const title = $.addText({
  text: 'The Three-Renderer Strategy',
  fontSize: 6,
  color: '#FF5A1F',
  position: [0.5, 0.4],
});

title.fadeIn('800ms');
$.wait('3s');
title.fadeOut('500ms');

const json = await $.compile();

Once you have the json, you can render it anywhere. On the server, it's as simple as:

import '@videoflow/renderer-server';

// In a Node.js environment
await $.renderVideo({
  outputType: 'file',
  output: './intro.mp4',
});

How VideoFlow Handles the Complexity

VideoFlow was built from the ground up to support this multi-environment architecture. The official renderers share a common runtime layer hierarchy, ensuring that every transition, every GLSL effect, and every keyframe easing behaves exactly the same way whether it's rendered to a <canvas> in a browser or a headless buffer on a server.

By leveraging the VideoFlow Documentation, you can explore how to extend these renderers with custom layer types or integrate them into your existing React applications using the @videoflow/react-video-editor package.

Conclusion: Start Building with JSON

The Three-Renderer Strategy isn't just about rendering; it's about building a scalable, maintainable video infrastructure. By separating the what (VideoJSON) from the how (the renderers), you gain the flexibility to preview locally, export for free, and automate at scale.

Ready to see it in action? Head over to the Playground to build your first video, or check out the source code on GitHub to see how the renderers are implemented. Stop fighting FFmpeg shell scripts and start treating video like the data it is.