Building a Video Rendering API with Node.js and VideoFlow (No FFmpeg Required)

Generating dynamic, personalized videos for your users should feel like building a web app, not like wrestling with 1990s command-line syntax. Yet, for years, the standard approach has been to wrap FFmpeg in fragile shell scripts that are a nightmare to maintain and even harder to scale.

For engineering teams at SaaS companies, video automation is often a "high-effort" bucket. Between managing server-side binaries, handling complex filter graphs, and ensuring font consistency across environments, the overhead is massive. VideoFlow changes this equation by providing an Apache-2.0 toolkit that turns TypeScript into professional MP4s using a headless rendering pipeline that doesn't even require FFmpeg to be installed.

The Problem: The FFmpeg Filter Graph Trap

If you've ever tried to build a "YouTube Shorts Factory" or a "Personalized Onboarding Video" service using raw FFmpeg, you know the pain. You start with a simple overlay, but soon you're trying to animate a title, add a fade-in transition, and stack a subtle glow effect.

In FFmpeg, that looks like a string of [0:v][1:v]overlay=... filters that quickly becomes unreadable. If you want to change a font size or adjust a timing by 100ms, you're digging through a dense block of text. There’s no type safety, no real-time preview, and certainly no easy way to debug why a specific layer didn't render correctly.

The Solution: Video as Portable JSON

VideoFlow approaches the problem differently. It treats a video as a VideoJSON document—a portable, resolution-agnostic schema that describes every layer, animation, and effect in your project.

Instead of shell commands, you use the @videoflow/core builder API to construct your scene. Because it's just code, you can use loops, conditionals, and external data sources to drive the content.

import VideoFlow from '@videoflow/core';

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

// The "Two-Arg" Pattern: Properties vs Settings
const bg = $.addImage(
  { fit: 'cover', opacity: 0.8 }, // Properties (animatable)
  { source: 'https://assets.example.com/background.jpg' } // Settings (static)
);

const title = $.addText({
  text: 'Your Weekly Recap',
  fontSize: 7,
  color: '#FF5A1F',
  position: [0.5, 0.4]
});

title.fadeIn('800ms');
$.wait('3s');
title.fadeOut('500ms');

Building the Rendering API

Once you have your VideoJSON (produced by $.compile()), you need to render it. This is where @videoflow/renderer-server comes in. It's a Node.js package that drives a headless Chromium instance via Playwright.

Why Chromium? Because it's the most robust rendering engine in the world. By rendering inside a browser, VideoFlow can support:

• 27 transition presets (like blurResolve and lightSweepReveal).
• 42 GLSL effects (like bloom, frostedGlass, and vhsDistortion).
• 16 blend modes (exactly like CSS/Photoshop).
• Custom Web Fonts that look identical on your local machine and your production server.

Here is a complete example of a Node.js API handler that generates a video on the fly:

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

async function handleRequest(req, res) {
  const { userData } = req.body;
  
  const $ = new VideoFlow({ width: 1280, height: 720 });
  
  // Build your video using userData...
  $.addText({ text: `Hello ${userData.name}`, fontSize: 6 });
  $.wait('5s');

  // The "No FFmpeg" Fast Path
  // By default, this uses WebCodecs inside the browser to encode the MP4.
  const buffer = await $.renderVideo({
    outputType: 'buffer',
    verbose: true
  });

  res.setHeader('Content-Type', 'video/mp4');
  res.send(buffer);
}

How VideoFlow Handles This (The Internals)

The magic of "No FFmpeg Required" lies in the Server Renderer. While most tools take screenshots of a browser and pipe them into an FFmpeg process, VideoFlow's default pipeline uses WebCodecs + MediaBunny directly inside the headless Chromium instance.

The browser encodes the video frames as it renders them and bundles them into an MP4 container. This finished binary is then passed back to your Node.js process. This approach is significantly faster because it avoids the overhead of per-frame screenshots and the JPEG-to-H.264 re-encoding step.

If you do need specific FFmpeg flags (like custom x264 profiles), VideoFlow still supports an optional FFmpeg pipeline via { ffmpeg: true }, but for 90% of use cases, the zero-dependency path is the winner.

Why This Scales

Because VideoFlow is Open Source (Apache-2.0), you aren't locked into a proprietary cloud rendering service. You can run this on your own infrastructure, scale it with Kubernetes, or even run it on a small VPS.

Furthermore, because the same VideoJSON works across all three renderers, you can build a workflow where:

1. Users edit and preview their video in real-time using the DOM Renderer in your React app.
2. For quick social shares, you export the MP4 directly in their browser (see our guide on Zero-Cost Video Rendering).
3. For batch processing or high-quality background jobs, you send the same JSON to your Node.js API for a server-side render.

Getting Started

If you're ready to ditch the shell scripts and start treating video like code, the best place to start is the VideoFlow Playground. You can experiment with the builder API directly in your browser and see the results instantly.

For a deeper dive into the architecture, check out our Renderer Documentation or the Getting Started guide to set up your first Node.js project.

Happy rendering!