Building Real-Time Stream Overlays with VideoFlow and the DOM Renderer

Live streaming has evolved far beyond a simple webcam feed. Today’s viewers expect interactive, data-driven motion graphics—live scoreboards, twitch alerts, lower-thirds that respond to chat, and real-time polls. Traditionally, building these meant either wrestling with complex OBS browser sources or paying for proprietary cloud-rendering APIs.

With VideoFlow, you can treat your stream overlays as code. By leveraging the @videoflow/renderer-dom package, you can render frame-accurate, high-performance motion graphics directly in the browser, perfect for live environments where latency and flexibility are paramount.

Why the DOM Renderer for Live Graphics?

While @videoflow/renderer-server is the workhorse for headless MP4 exports, the DOM renderer is designed for live interaction. It paints your VideoJSON composition into a standard DOM element using Shadow DOM for style isolation.

Key advantages for stream overlays include:

• Zero Latency: Graphics are rendered locally in the browser tab, avoiding the round-trip of a server-side render.
• Dynamic Updates: You can patch layers in real-time (e.g., updating a score or a username) without reloading the entire composition.
• Interactive Hooks: Since it’s running in the DOM, you can trigger animations based on external events like WebSockets or API calls.
• Apache-2.0 Licensed: The core and all renderers are fully open source, making it a powerful Remotion alternative for developers who need permissive licensing.

Setting Up the Live Overlay

To build a live overlay, we first define our composition using the @videoflow/core builder. In this example, we'll create a dynamic "Breaking News" lower-third that can be updated on the fly.

import VideoFlow from '@videoflow/core';

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

// A background shape for the lower third
const bar = $.addShape(
  { 
    width: 80, height: 10, 
    fill: '#FF5A1F', 
    position: [0.5, 0.85] 
  },
  { 
    shapeType: 'rectangle', 
    transitionIn: { transition: 'slideUp', duration: '600ms' }
  }
);

// The dynamic text layer
const headline = $.addText({
  text: 'LIVE UPDATES',
  fontSize: 5,
  color: '#fff',
  position: [0.5, 0.85],
  fontWeight: 700
});

const videoJSON = await $.compile();

Rendering to the Browser

Now, we use @videoflow/renderer-dom to mount this composition. This is the same engine that powers the VideoFlow Playground.

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

const host = document.getElementById('overlay-root');
const renderer = new DomRenderer(host);

// Load the initial state
await renderer.loadVideo(videoJSON);
await renderer.play();

Handling Real-Time Updates

The real power of VideoFlow in a live context is the updateLayer API. Instead of re-compiling the entire video, you can target specific layers by their ID. This is ideal for a "Live Recap" video or a scoreboard where only the data changes.

// Assuming you have the layer ID from the compilation
await renderer.updateLayer(headline.id, {
  properties: { ...headline.properties, text: 'NEW GOAL: TEAM A' }
});

This update is applied instantly to the running DOM renderer, providing a seamless experience for the viewer. If you're building a more complex dashboard, you can explore our examples gallery to see how to group and animate multiple data-driven layers.

Beyond Simple Overlays: The React Editor

If you are building a tool for other streamers, you might want to give them a UI to customize their own overlays. The @videoflow/react-video-editor is a drop-in component that provides a full multi-track timeline and inspector. It's free for individuals and small teams, making it a great way to embed a video editor into your SaaS product.

Conclusion

By treating video as data and using the browser as a renderer, VideoFlow opens up a new world of programmatic motion graphics. Whether you're building a social media automation factory or a high-end live stream production, the combination of a typed builder and a frame-accurate DOM renderer provides the control and performance developers need.

Ready to build your first overlay? Head over to the VideoFlow Documentation or check out the source on GitHub to get started.