Beyond Previews: Building Interactive Video with @videoflow/renderer-dom

For most developers, "video production" is a batch process. You write a script, you trigger a render, and minutes later you get a static MP4 file. If you want to change a single word or adjust a transition, you start over. But what if the video wasn't a black box? What if it was a live, interactive DOM tree that responded to user input in real-time?

This is where the VideoFlow Core architecture shines. While most programmatic video tools focus exclusively on the final export, VideoFlow treats the video as a portable VideoJSON document that can be rendered anywhere.

In this deep dive, we’re looking at @videoflow/renderer-dom—the official renderer that turns your video code into a frame-accurate, 60fps interactive experience directly in the browser.

The Three-Renderer Rule

In a previous post about The Three-Renderer Rule, we explored how VideoFlow uses a single schema to power previews, client-side exports, and server renders.

The @videoflow/renderer-dom package is the "live" pillar of that rule. Unlike the browser renderer (which renders off-screen to capture frames) or the server renderer (which drives headless Chromium), the DOM renderer mounts directly into your UI.

It handles the heavy lifting of audio-video synchronization, frame-accurate seeking, and style isolation using Shadow DOM. This means you can drop a video preview into any complex React or Vue app without worrying about global CSS leaking into your video layers.

Getting Started with DomRenderer

Setting up a live preview is as simple as constructing a renderer instance and pointing it at a host element. Here is the canonical pattern for mounting a player:

import VideoFlow from '@videoflow/core';
import DomRenderer from '@videoflow/renderer-dom';

// 1. Define your video logic
const $ = new VideoFlow({ width: 1920, height: 1080, fps: 30 });
const title = $.addText({ text: 'Interactive Video', fontSize: 6, color: '#FF5A1F' });
title.fadeIn('500ms');
$.wait('2s');

// 2. Compile to VideoJSON
const json = await $.compile();

// 3. Mount the renderer
const player = new DomRenderer(document.getElementById('video-container'));
await player.loadVideo(json);

// 4. Control playback
await player.play();

Once loaded, the player instance gives you full control over the timeline. You can jump to specific frames with player.seek(frame) or use the player.currentTime setter to scrub through the video programmatically.

Real-Time Incremental Editing

One of the most powerful features of @videoflow/renderer-dom is its support for incremental editing primitives.

In a traditional video preview, if a user changes the color of a text layer, you might have to re-compile the entire project and reload the video. With the DOM renderer, you can mutate individual layers on the fly:

// Update a single layer's properties without a full reload
player.updateLayer('layer-id-123', {
  color: '#00FF00',
  fontSize: 8
});

// The renderer immediately updates the current frame in the DOM
await player.renderFrame(player.currentFrame);

This makes it the perfect engine for building a web-based video editor. You get instant feedback as the user drags sliders or types text, all while maintaining the exact same visual output that will eventually be rendered to an MP4.

Why This Matters for SaaS

If you are building a platform that involves video—whether it's an automated social media tool, a personalized sales video generator, or an internal training platform—the user experience depends on the "loop."

The faster a user can see their changes, the more likely they are to engage. By using @videoflow/renderer-dom for the preview and @videoflow/renderer-browser for the final export, you eliminate the "black box" of video production.

The VideoFlow Playground is a perfect example of this in action. Every time you tweak a line of code, the DOM renderer hot-swaps the project state, giving you a live, frame-accurate preview of your changes.

Summary

VideoFlow isn't just a library for making MP4s; it's a toolkit for making video a first-class citizen of the web. By leveraging the DOM renderer, you can move beyond static files and build truly interactive video experiences.

Ready to see it in action? Head over to the VideoFlow GitHub to explore the source, or check out the official documentation to start building your own interactive video pipeline today.