Automated Video Pipelines: Building a Video Factory with VideoFlow and GitHub Actions

Running a video pipeline shouldn't require a dedicated GPU server or a complex microservices architecture. For most engineering teams, the dream is simpler: you push code, or a database trigger fires, and a polished MP4 appears in an S3 bucket. No manual editing, no fragile FFmpeg shell scripts, and no proprietary SaaS lock-in.

In this guide, we’ll look at how to treat video as a first-class citizen of your CI/CD pipeline. By combining the VideoFlow core builder with GitHub Actions, you can build a fully automated video pipeline that scales without the overhead of managing infrastructure.

Why Automate Your Video Stack?

Most video automation today falls into two camps: either you're wrestling with string-concatenated FFmpeg commands that break the moment a file path has a space, or you're paying a high per-minute fee for a proprietary API.

Building a "video factory" on top of GitHub Actions offers a middle ground. Because VideoFlow is open-source (Apache-2.0), you aren't paying for the privilege of rendering. You're just paying for the compute—which, on GitHub Actions, is often free for public repos or extremely cheap for private ones.

This approach is perfect for:

• Automated Product Updates: Generating a new feature highlight video every time you merge to main.
• Dynamic Social Assets: Creating vertical videos for new blog posts automatically.
• Data-Driven Recaps: Batch-rendering weekly user activity summaries from a JSON dataset.

Step 1: The Render Script

To run VideoFlow in a headless environment, we use the @videoflow/renderer-server package. This renderer uses Playwright to drive a headless Chromium instance, ensuring that the video you see in the Playground is exactly what gets baked into the MP4.

Here is a minimal script (render.js) that takes a dynamic title and renders a video:

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

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

  const title = $.addText({
    text: titleText,
    fontSize: 8,
    color: '#FF5A1F',
    fontWeight: 700,
    position: [0.5, 0.4],
  });

  title.fadeIn('600ms');
  $.wait('3s');
  title.fadeOut('400ms');

  await $.renderVideo({
    outputType: 'file',
    output: './output.mp4',
  });
}

buildVideo(process.argv[2] || 'Default Title');

Step 2: Orchestrating with GitHub Actions

The magic happens in the .github/workflows/render-video.yml file. We need to ensure Chromium is installed so the server renderer can do its job. VideoFlow is designed to be "FFmpeg-optional" by default—it uses WebCodecs inside the headless browser to encode the video, which is significantly faster and easier to set up in CI than a custom FFmpeg build.

name: Render Video
on:
  workflow_dispatch:
    inputs:
      title:
        description: 'Video Title'
        required: true
        default: 'Hello from CI'

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 @videoflow/core @videoflow/renderer-server
      
      - name: Install Chromium
        run: npx playwright install chromium
      
      - name: Render MP4
        run: node render.js "${{ github.event.inputs.title }}"
      
      - name: Upload Video
        uses: actions/upload-artifact@v4
        with:
          name: rendered-video
          path: output.mp4

How VideoFlow Handles Automation

VideoFlow was built from the ground up for the "Video as Code" era. Unlike tools that rely on a heavy React runtime or proprietary cloud engines, VideoFlow's core philosophy is built on three pillars that make it perfect for automated video pipelines:

1. JSON Portability: The builder compiles to a standard VideoJSON document. This means your CI/CD pipeline doesn't even need to be the one running the logic—you could have an LLM agent emit the JSON and simply pass it to our official renderers.
2. Zero-Dependency Rendering: By leveraging WebCodecs in the browser, @videoflow/renderer-server avoids the common headaches of managing FFmpeg versions and codecs on Linux runners.
3. Resolution Agnostic: Because we use em units (where 1em = 1% of width), you can test your pipeline at 360p to save CI credits and then switch to 4K for the final production run without changing a single line of layout code.

If you're already automating product demos with TypeScript, moving that logic into a GitHub Action is the natural next step for a truly hands-off workflow.

Closing the Loop

Building a video factory isn't just about rendering; it's about integration. Once your video is rendered in GitHub Actions, you can pipe it to S3, post it to a Slack channel, or even trigger a social media API.

Ready to start building? Head over to the VideoFlow documentation to explore the full range of cinematic effects and transitions you can use in your automated scripts. If you want to see how the code looks in action before committing to a pipeline, try the interactive Playground or check out the source on GitHub.