Video CI/CD: How to Automate Video Previews in Your Pull Requests

If you are building a video-heavy product, you’ve likely felt the pain of a "broken" template hitting production. A missing asset, a miscalculated keyframe, or a font that doesn't load can turn a personalized customer video into a black screen. But because video is traditionally seen as a binary asset rather than code, it often escapes the rigors of modern CI/CD.

At VideoFlow, we believe video is code. And because it's code, it should be tested, linted, and previewed automatically before it ever gets merged. In this guide, we’ll look at how to build a Video CI/CD pipeline that generates automated MP4 previews for every Pull Request.

Why Your Video Pipeline Needs CI/CD

When your video logic lives in a TypeScript file using the VideoFlow Core API, it becomes part of your application's logic. Changes to a theme, a shared component, or a rendering utility can have unintended side effects on your video output.

Automating video previews in your PRs provides three massive benefits:

1. Visual Regression Testing: Catch breaking layout changes before they reach users.
2. Stakeholder Review: Allow non-technical team members to see exactly what the video looks like without running a local dev server.
3. Deployment Confidence: Ensure your Server Renderer can successfully compile and export the MP4 in a headless environment.

Step 1: Headless Rendering with @videoflow/renderer-server

The first step in a Video CI/CD pipeline is a script that can take your code and turn it into a file. Unlike traditional tools that require a heavy FFmpeg installation, VideoFlow’s server renderer drives a headless Chromium instance to produce pixel-perfect output that matches your browser preview.

Here is a minimal script (render-preview.js) that exports a video from a template:

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

async function generatePreview() {
  const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });

  // Your video template logic here
  const title = $.addText({
    text: 'PR Preview: ' + (process.env.GITHUB_SHA?.slice(0, 7) || 'Local'),
    fontSize: 5,
    color: '#FF5A1F',
    position: [0.5, 0.5]
  });

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

  // Render to a file for the CI artifact
  await $.renderVideo({
    outputType: 'file',
    output: './preview.mp4',
    verbose: true
  });
}

generatePreview();

As we discussed in our guide on how to render MP4 in Node.js without FFmpeg, this approach is significantly more stable in CI environments because it relies on WebCodecs and Playwright rather than complex native binary dependencies.

Step 2: Integrating with GitHub Actions

Once you have a rendering script, you can trigger it on every pull_request event. A typical GitHub Action for Video CI/CD follows this flow:

1. Checkout code
2. Install dependencies (npm install)
3. Install Chromium (npx playwright install chromium)
4. Run the render script
5. Upload the MP4 as a workflow artifact or to an S3 bucket.

By uploading the resulting preview.mp4 as an artifact, reviewers can download and watch the video directly from the GitHub UI. For a more advanced setup, you can use a GitHub Bot to post a comment on the PR with a link to the hosted video.

How VideoFlow Makes This Easy

The secret to VideoFlow's CI-friendliness is the VideoJSON format. When you call $.compile(), your entire timeline—including transitions like blurResolve and effects like glow—is serialized into a portable JSON document.

This means your CI pipeline doesn't necessarily need to run the full TypeScript logic if you already have the JSON. You can simply pass the JSON to the Renderer API and get an identical MP4 every time. This portability is why teams are choosing VideoFlow over Remotion alternatives when building automated content factories.

Treating Video Like Code

Automating your video previews is the first step toward a mature video-as-code architecture. Once you have previews working, you can add automated visual testing (comparing frames against a baseline) and even performance benchmarking for your render times.

Ready to start building your own pipeline? Head over to the VideoFlow Playground to experiment with the builder API, or check out the official documentation for more server-side rendering patterns.

You can find the full source for all our renderers on GitHub.