Git-Driven Video: Building a CI/CD Pipeline for Your MP4 Assets

Video assets have long been the 'black box' of the modern web stack. While our code is versioned, peer-reviewed, and automatically deployed via CI/CD, our video content often remains trapped in manual export loops, drifting out of sync with the product it’s supposed to showcase. If a UI color changes or a feature is renamed, someone has to open an editor, re-render, and manually upload a new binary.

What if we treated video like any other frontend asset? What if your MP4s were just a side effect of a git push?

By leveraging VideoFlow's core builder API and the headless server renderer, you can move away from manual exports and build a fully automated, Git-driven video pipeline. In this guide, we’ll look at how to render production-ready videos inside a CI environment without ever touching a GUI.

Why Video as Code Matters

When your video is defined as a portable VideoJSON document, it stops being a binary blob and starts being data. This shift unlocks several critical advantages for engineering teams:

1. Single Source of Truth: Your video templates live in your repository. A change to the branding constants in your theme file automatically updates every video in the next build.
2. Automated Regression Testing: Just as you screenshot-test your UI, you can frame-verify your videos. If a dependency update breaks a transition, your CI build fails.
3. Scalability: Need to generate 500 personalized variations of a product announcement? A script can loop through your data, compile the JSON, and queue the renders in parallel.

The Anatomy of a Headless Render

To build this pipeline, we use @videoflow/renderer-server. Unlike traditional video tools that require complex FFmpeg configurations and system-level codecs, VideoFlow’s server renderer drives a headless Chromium instance to execute the same rendering logic used in the Playground.

Here is a minimal script that compiles a scene and renders it to a file. This is the script your CI runner will execute:

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

async function buildAndRender() {
  // 1. Define the video
  const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });

  $.addText({
    text: 'Automated Build Success',
    fontSize: 5,
    color: '#FF5A1F',
    position: [0.5, 0.4]
  }).fadeIn('500ms');

  $.wait('2s');

  // 2. Compile to VideoJSON
  const json = await $.compile();

  // 3. Render to MP4 using headless Chromium
  await VideoRenderer.render(json, {
    outputType: 'file',
    output: './assets/latest-build.mp4',
    verbose: true
  });

  console.log('Video rendered successfully!');
}

buildAndRender();

Integrating with GitHub Actions

Running this in a CI environment like GitHub Actions is straightforward because VideoFlow doesn't require FFmpeg by default—it uses WebCodecs inside Chromium. You only need to ensure Playwright's browser dependencies are installed.

name: Render Video Assets
on: [push]

jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm install

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Render Video
        run: node scripts/render-video.js

      - name: Upload Asset
        uses: actions/upload-artifact@v4
        with:
          name: video-assets
          path: assets/latest-build.mp4

This workflow ensures that every time you update your video code, a fresh MP4 is generated and attached to the build. You can extend this to push the resulting file to S3 or a CDN, effectively creating a self-updating video asset library.

How VideoFlow Handles the Heavy Lifting

The magic of this workflow lies in the three-renderer architecture. Because the browser, server, and DOM renderers all consume the exact same JSON, you can build and preview your video in the browser during development and trust that the CI server will produce a byte-for-byte identical MP4.

This is a significant departure from tools like Remotion, which are often tied to a specific React runtime. VideoFlow’s JSON-first approach makes it the ideal choice for agentic video pipelines and automated content factories where the "editor" might be a script or an LLM rather than a human.

Next Steps

Moving your video production into your CI/CD pipeline is the first step toward true content automation. From here, you can start exploring dynamic data injection or building custom internal tools with the React Video Editor.

Ready to stop manual exports? Check out the VideoFlow GitHub repository to see the full source of the server renderer, or jump into the Quick Start guide to build your first automated template.