Serverless Video Rendering: How to Deploy VideoFlow to AWS Lambda and Vercel

The dream of "video as a service" often dies on the altar of infrastructure complexity. For years, programmatic video meant managing expensive GPU clusters, fighting with FFmpeg shell scripts, and scaling cold-start-heavy container fleets. But as the web platform matures, the barrier to entry is collapsing.

Serverless video rendering is no longer a niche capability for giant media companies. With the right toolkit, you can turn a serverless function into a high-performance render node that scales from zero to hundreds of concurrent jobs without you ever touching a server.

In this guide, we'll explore how to deploy VideoFlow—an open-source TypeScript toolkit—to AWS Lambda and Vercel to build a scalable, cost-effective video generation pipeline.

The Serverless Challenge: Why Video is Hard

Video rendering is traditionally resource-intensive. It requires significant CPU for encoding and often relies on FFmpeg, a massive binary that can be difficult to package for serverless environments with strict size limits. Furthermore, most "video-as-code" frameworks require a heavy runtime like React, which adds overhead to every frame.

VideoFlow takes a different approach. By using a portable VideoJSON format and the official renderers, it decouples the authoring of the video from the rendering.

VideoFlow’s Secret Sauce: No FFmpeg Required

The @videoflow/renderer-server package is designed specifically for modern cloud environments. Unlike traditional tools, it uses headless Chromium and WebCodecs to handle the heavy lifting.

As we discussed in our deep dive on Video Rendering Without FFmpeg, this means you don't need to install or manage FFmpeg binaries in your Lambda layer. By default, VideoFlow encodes inside the browser context, which is significantly more efficient for serverless cold starts and execution time.

Deploying to AWS Lambda

To run VideoFlow on AWS Lambda, you'll want to use the @videoflow/renderer-server package. Because this renderer drives Chromium, you'll need a way to run a headless browser in the Lambda environment. We recommend using a library like @sparticuz/chromium to provide the binary.

The Lambda Handler

Here is a minimal example of a Lambda function that takes a VideoJSON document and returns a rendered MP4 buffer:

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

export const handler = async (event) => {
  const { videoData } = JSON.parse(event.body);

  // 1. Initialize VideoFlow with your JSON
  const $ = new VideoFlow(videoData);

  // 2. Render to buffer
  const buffer = await $.renderVideo({
    outputType: 'buffer',
    // Pass the serverless-friendly browser path
    browserOptions: {
      executablePath: await chromium.executablePath(),
      args: chromium.args,
      headless: chromium.headless,
    }
  });

  return {
    statusCode: 200,
    headers: { 'Content-Type': 'video/mp4' },
    body: buffer.toString('base64'),
    isBase64Encoded: true,
  };
};

Configuration Tips

• Memory: Allocate at least 2048MB. Video rendering is memory-intensive; more memory also grants more CPU share in AWS, leading to faster renders.
• Timeout: Set your timeout to at least 30 seconds for short videos. For longer renders, consider an asynchronous architecture where the Lambda saves the file to S3 and triggers a webhook.

VideoFlow on Vercel Functions

Vercel is fantastic for building "render-on-demand" APIs. Because Vercel supports the same Node.js environment, you can use a similar pattern to AWS Lambda.

One of the biggest advantages of using VideoFlow on Vercel is the Three-Renderer Rule. You can build a UI where the user previews the video in real-time using the @videoflow/renderer-dom (live 60fps preview), and then hits a button to trigger a high-quality server-side render via a Vercel Edge Function or Serverless Function.

Check out the Playground to see this in action—the same JSON that powers the preview is what gets sent to the server for the final MP4 export.

Optimization: Concurrency and Caching

When building a production-grade serverless video pipeline, consider these three strategies:

1. Parallelize with $.parallel: If your video has independent sections, use VideoFlow's $.parallel builder method. While it doesn't split the render across Lambda instances, it optimizes the internal flow of the compiler.
2. CDN Caching: If you are generating personalized videos (e.g., for a SaaS dashboard), cache the resulting MP4s at the edge. Only trigger a re-render if the underlying data changes.
3. Client-Side Fallback: For simple exports, you might not even need a server. The @videoflow/renderer-browser can export MP4s directly in the user's tab using WebCodecs, saving you 100% of the server cost.

Getting Started

Serverless video rendering doesn't have to be a dark art. By treating video as portable JSON and leveraging headless Chromium, you can build powerful content automation tools with minimal infrastructure overhead.

Ready to build your first serverless video pipeline?

• Explore the Docs: Dive into the Core Concepts and the Renderer Guide.
• Try the Playground: Experiment with the live editor to see how VideoJSON works.
• Star the Repo: Follow our progress and contribute on GitHub.

Happy rendering!