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

Building video pipelines for modern applications usually involves a messy compromise. You either build a heavy server-side infrastructure that is expensive to scale, or you hack together a client-side preview that never quite matches what the final MP4 looks like. The result? A "works on my machine" nightmare where frames drop, fonts shift, and transitions glitch once they hit the encoder.

At VideoFlow, we solved this by implementing what we call the Three-Renderer Rule. By decoupling the scene description from the rendering technology, we ensure that the video you see in your browser during development is byte-for-byte identical to the one rendered on a headless server or exported as an MP4 by an end-user.

This architectural choice is powered by the VideoFlow renderers, a suite of three specialized engines that all consume the exact same portable VideoJSON document.

1. The DOM Renderer: Frame-Accurate Live Preview

When you are building a video editor or a dashboard with dynamic content, you need instant feedback. You cannot wait for a 30-second render every time you change a fontSize or adjust a position coordinate.

The @videoflow/renderer-dom engine is designed for this high-velocity feedback loop. It renders your scene directly into the DOM, targeting 60 fps with frame-accurate scrubbing. Unlike a simple <video> tag, the DOM renderer allows you to interact with the timeline, making it the perfect backbone for the React Video Editor.

Because it uses the same layout logic as our production encoders, the positioning you set in normalized 0–1 coordinates stays consistent. If a title is at [0.5, 0.4] in the preview, it will be exactly there in the final export.

2. The Browser Renderer: Zero-Cost MP4 Export

One of the biggest hurdles in programmatic video is the cost of server-side rendering. If every user export triggers a cloud instance, your margins disappear quickly.

Our solution is @videoflow/renderer-browser. It leverages the WebCodecs API to perform high-speed MP4 encoding directly in the user's browser tab. This is consistent video rendering at its most efficient: you offload the compute to the client while maintaining total control over the output quality.

It is worker-accelerated and supports progress callbacks, so your users get a smooth "Exporting..." experience without ever hitting your backend. You can try this right now in the VideoFlow Playground by hitting the 'Export' button.

3. The Server Renderer: Headless Automation at Scale

For batch jobs, scheduled social media posts, or personalized video at scale, you need a headless environment. The @videoflow/renderer-server package brings the same rendering engine to Node.js.

By driving headless Chromium (via Playwright), it bypasses the traditional complexity of managing FFmpeg dependencies. While it can opt into an FFmpeg pipeline for advanced x264 flag control, its default mode is a zero-dependency setup that renders identically to the browser. This makes it a powerful alternative to FFmpeg shell scripts for developers who prefer a typed, programmatic API over string-concatenated commands.

One JSON to Rule Them All

The magic isn't just in the renderers; it's in the VideoJSON format. When you use the @videoflow/core builder, you aren't just calling functions—you are constructing a declarative schema.

import VideoFlow from '@videoflow/core';

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

// Add a background with a GLSL effect
const bg = $.addImage(
  { fit: 'cover', effects: [{ effect: 'vignette', params: { strength: 0.5 } }] },
  { source: 'https://videoflow.dev/samples/background.jpg' }
);

// Add a title with a cinematic transition
const title = $.addText(
  { text: 'Consistent Rendering', fontSize: 6, color: '#FF5A1F' },
  { transitionIn: { transition: 'blurResolve', duration: '800ms' } }
);

$.wait('3s');

// This single compile() result works across all three renderers
const videoJson = await $.compile();

Whether you pass this videoJson to the DOM renderer for a preview, the browser renderer for a quick download, or the server renderer for a high-volume job, the output is guaranteed to be the same. This portability is why VideoFlow is increasingly the choice for teams moving away from Remotion who need more flexible licensing and platform-agnostic rendering.

Start Building for Consistency

Stop fighting with divergent render outputs. By adopting the Three-Renderer Rule, you can focus on the creative side of your video pipeline while we handle the pixels.

Ready to see it in action?

• Explore the Getting Started guide to choose your first renderer.
• Check out our Examples gallery to see what's possible with our 27 transition presets.
• Star the project on GitHub and join the community building the future of video-as-code.