The Three-Renderer Rule: Scaling Video from Preview to Production

Building a video pipeline usually involves a painful trade-off. You either build a fast web-based preview that doesn't quite match the final export, or you build a server-side rendering engine that is too slow for interactive use. In the industry, we call this "rendering drift"—the subtle, frustrating differences between what the user sees in the editor and what finally lands in the MP4.

At VideoFlow, we solved this by implementing the Three-Renderer Rule. By decoupling the scene description (VideoJSON) from the rendering engine, we created a system where the exact same code produces byte-for-byte identical output across three distinct environments: the browser tab, the server, and the live preview.

Why Your Video Pipeline Should Be Diffable

Most video tools treat the "project" as a proprietary, opaque blob or a complex React component tree. VideoFlow treats it as data. Every animation, every GLSL effect, and every layer in a VideoFlow project is compiled into a portable, version-controllable VideoJSON document.

When your video is just JSON, you gain superpowers:

• Instant Previews: Render a frame-accurate 60 fps preview in the DOM while the user edits.
• Zero-Cost Browser Exports: Let the user's browser encode the final MP4 using WebCodecs, saving you thousands in server costs.
• Reliable Server Rendering: Queue up heavy batch jobs on Node.js and get the exact same result you saw in the browser.

1. The DOM Renderer: Frame-Accurate Live Preview

For any interactive tool, the preview is the most important part of the UX. Using @videoflow/renderer-dom, you can mount a live, seekable preview directly into your React or Vue app. Because it uses the same rendering logic as the final export, what you see at 60 fps is exactly what will be encoded.

import { DOMRenderer } from '@videoflow/renderer-dom';

// Mount the renderer to a container
const renderer = new DOMRenderer(container, { 
  width: 1920, 
  height: 1080 
});

// Load the VideoJSON compiled from the builder
await renderer.loadProject(videoJson);

// Seek to any frame instantly
renderer.seek(2.5);

You can see this in action right now in the VideoFlow Playground, where the editor provides a real-time look at your code-based compositions.

2. The Browser Renderer: Client-Side MP4 Export

Why pay for server-side rendering if the user's machine can do it for free? The @videoflow/renderer-browser uses the modern WebCodecs API to encode H.264/MP4 files directly in a browser tab. This is perfect for SaaS dashboards or social media tools where users want to download their video immediately after editing.

3. The Server Renderer: Headless Chromium on Node

For automated content factories or background batch jobs, you need a server-side solution. The @videoflow/renderer-server package runs a headless Chromium instance via Playwright.

Crucially, it does not require FFmpeg to be installed by default. It uses the same WebCodecs-based pipeline as the browser renderer, intercepted by Node to produce a Buffer or a file. This makes it incredibly easy to deploy to serverless environments or Docker containers.

import VideoFlow from '@videoflow/core';
import '@videoflow/renderer-server';

const $ = new VideoFlow({ width: 1080, height: 1920 });
$.addText({ text: 'Automated Render', fontSize: 8 });
$.wait('5s');

// Render to a file on the server
await $.renderVideo({
  outputType: 'file',
  output: './production-export.mp4'
});

Scaling from One to Millions

By following the Three-Renderer Rule, you can start small with a simple React-based editor using the React Video Editor and scale to a massive automated pipeline without ever rewriting your video logic. Your templates are just code, your projects are just JSON, and your rendering is guaranteed to be consistent everywhere.

Whether you are building a YouTube Shorts factory or a personalized onboarding flow, VideoFlow provides the primitives to scale your video production with confidence.

Ready to build your first video pipeline? Check out our Getting Started guide or dive into the source on GitHub.