How to Render MP4s in Node.js Without FFmpeg

If you’ve ever tried to build a video generation pipeline on the server, you know the "FFmpeg Wall." You start with a simple shell command, and three weeks later you're debugging obscure codec flags, managing complex binary dependencies in your Docker containers, and wondering why your horizontal scaling is so brittle.

Rendering video in Node.js shouldn't require a PhD in media engineering. In this guide, we’ll show you how to render MP4 in Node.js without FFmpeg using VideoFlow’s headless rendering pipeline.

The Problem with FFmpeg-First Pipelines

FFmpeg is the industry standard for a reason, but for most web developers building automated content, it’s often the wrong tool for the job. Scaling FFmpeg in serverless environments is notoriously difficult because of its heavy binary footprint. Furthermore, translating high-level design requirements—like "add a blur transition" or "apply a frosted glass effect"—into raw FFmpeg filters is a nightmare of string-concatenated commands.

VideoFlow takes a different approach. Instead of treating video as a stream of raw frames to be encoded by a CLI, it treats video as a portable VideoJSON document.

The FFmpeg-Free Architecture

VideoFlow’s @videoflow/renderer-server package uses a headless Chromium instance (via Playwright) to execute the same rendering logic used in the browser. By leveraging the WebCodecs API inside Chromium, VideoFlow can encode high-quality MP4s directly to a Node.js Buffer or file without ever needing a local ffmpeg installation.

This means your server-side rendering logic is byte-for-byte identical to what you see in the Playground. If it looks right in your browser during development, it will look exactly the same when rendered on your server.

Step 1: Building Your Scene

First, we use the @videoflow/core builder to define our video. VideoFlow uses a fluent API that focuses on layers and timing rather than frame math.

import VideoFlow from '@videoflow/core';

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

// Add a background image
const bg = $.addImage(
  { fit: 'cover', opacity: 0.8 },
  { source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' }
);

// Add a title with a built-in transition
const title = $.addText(
  {
    text: 'NO FFMPEG REQUIRED',
    fontSize: 8,
    color: '#FF5A1F',
    fontWeight: 900,
    position: [0.5, 0.5]
  },
  {
    transitionIn: { transition: 'blurResolve', duration: '800ms' }
  }
);

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

Step 2: Rendering the MP4 in Node.js

To render this on the server, we simply import the renderer and call renderVideo. Because VideoFlow defaults to the WebCodecs pipeline, you don't need to configure any external binaries.

import '@videoflow/renderer-server'; // Registers the server renderer

// Render directly to a file
await $.renderVideo({
  outputType: 'file',
  output: './rendering-demo.mp4',
  verbose: true
});

This single call launches a headless browser, compiles your VideoJSON, and streams the finished MP4 to your filesystem. If you are building an API, you can also use outputType: 'buffer' to send the video bytes directly to a cloud storage bucket or as a response to a client.

Why This Matters for Scaling

By removing the FFmpeg dependency, your video pipeline becomes significantly more portable. You can run this code in standard Node.js environments, including many serverless platforms, as long as they support running a headless browser.

This architecture also enables the Three-Renderer Rule: you can use the official renderers to preview your video in the DOM at 60fps, export it in the user's browser tab to save server costs, or queue it for a server-side render—all using the exact same code.

If you're already doing client-side export, check out our guide on Browser-Side Video Export to see how to offload rendering to your users.

Conclusion

Stop fighting with FFmpeg strings. By treating video as data and leveraging modern browser APIs on the server, VideoFlow makes it possible to build professional video pipelines with the same ease as building a web app.

Ready to start building? Head over to our documentation to explore the full builder API, or dive into the source on GitHub.