The Three-Renderer Rule: Preview, Export, and Automate with VideoFlow

Building a video pipeline usually involves a painful trade-off: do you want a fast live preview for your users, or a reliable headless export for your servers? Most tools force you to pick one or maintain two separate codebases. In VideoFlow, we solve this with the three-renderer rule.

The premise is simple: your video logic should be defined once as portable VideoJSON and then rendered identically across three official, specialized engines. Whether you are building a real-time editor, a client-side export tool, or a massive automation factory, the output remains byte-for-byte identical.

Why Programmatic Video Needs a Standard

Traditional video editing is a destructive process. You move pixels, you bake them into a file, and the original context is lost. Programmatic video—where videos are generated from data—changes the game. But without a unified rendering strategy, developers end up chaining fragile FFmpeg shell scripts or trying to sync React component states with canvas frames.

VideoFlow treats video as a data structure. By using the @videoflow/core builder, you produce a VideoJSON document that describes every layer, animation, and effect in a format any engine can understand. This is the foundation of the three-renderer rule.

1. The DOM Renderer: Frame-Accurate Live Preview

The first pillar is @videoflow/renderer-dom. If you’ve ever used a video editor, you know that "scrubbing" is the most important interaction. You need to see exactly what a specific millisecond looks like without waiting for a render.

The DOM renderer maps your VideoJSON directly to a high-performance DOM target. It provides a frame-accurate, 60fps live preview that allows users to interact with the timeline in real-time. This is the engine behind our Playground and the React Video Editor.

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

const renderer = new DomRenderer({
  target: document.getElementById('preview-container'),
  project: videoJson,
});

// Frame-accurate seeking
await renderer.seek('2.5s');
renderer.play();

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

The second pillar is @videoflow/renderer-browser. One of the biggest hidden costs in video SaaS is server-side rendering. Encoding a single 1080p video can take significant CPU time and money.

What if the user's browser could do the heavy lifting? The browser renderer uses WebCodecs to export high-quality MP4s directly in the user's tab. This means you can offer video export features to thousands of users simultaneously with zero infrastructure cost. It’s worker-accelerated, supports progress callbacks, and handles complex GLSL effects without breaking a sweat.

3. The Server Renderer: Headless Automation at Scale

The final pillar is @videoflow/renderer-server. When you need to generate videos on a schedule—like weekly recap videos or automated social media posts—you need a headless environment.

The server renderer runs in Node.js and uses Playwright to drive a headless Chromium instance. Unlike other tools that require a complex FFmpeg setup, VideoFlow’s server renderer uses a WebCodecs-based pipeline by default. It’s faster, cleaner, and produces the exact same pixels you saw in the DOM preview.

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

const $ = new VideoFlow({ width: 1280, height: 720 });
$.addText({ text: 'Automated Video', fontSize: 5 });
$.wait('5s');

await $.renderVideo({
  outputType: 'file',
  output: './automated-export.mp4',
});

How VideoFlow Handles the Complexity

By separating the definition of the video from the rendering of the video, VideoFlow allows you to scale your architecture as your needs grow. You might start by letting users build videos in our React Video Editor, previewing them with the DOM renderer. When they hit save, you can choose to export in the browser for speed or queue a job for the server renderer for high-volume batch processing.

This portability is why we advocate for VideoJSON as a first-class citizen. It ensures that your video pipeline is diffable, version-controlled, and future-proof.

Get Started with the Three-Renderer Rule

Ready to move beyond fragile shell scripts? Whether you're building a YouTube Shorts factory or a personalized SaaS dashboard, VideoFlow gives you the tools to render anywhere.

• Explore the API: Check out our comprehensive guides to learn about layers, animations, and effects.
• Try it out: Head over to the Playground to see the DOM renderer in action.
• Contribute: VideoFlow is open-source (Apache-2.0). Star us or contribute on GitHub.

The future of video is programmatic. With the three-renderer rule, you can ensure that future is consistent, scalable, and developer-friendly.