GitHub to Video: Automating Product Update Videos from Your Commit History

Keeping your users informed about product updates usually presents a frustrating choice: you either ship a dry, text-only changelog that few people read, or you lose hours of engineering time in a video editor manually animating feature highlights.

For fast-moving teams, this friction often means product videos never happen. But what if your commit history was the storyboard? By treating your video as data, you can transform a list of GitHub commits into a cinematic feature reel automatically.

In this guide, we'll show you how to build a programmatic video pipeline using VideoFlow that turns your development velocity into high-quality social content.

The Concept: Commit Message as Script

Every commit message in your repository is already a micro-summary of progress. When we connect to the GitHub API, we can pull these messages, filter for those tagged with feat: or fix:, and map them directly to VideoFlow layers.

Because VideoFlow uses a fluent TypeScript builder, we can treat the video timeline like any other data structure. We don't need to manually calculate frame offsets; we just iterate through our commits and let the builder API handle the flow.

Building the Timeline

Let’s look at a core implementation. We'll use $.addText for the headlines and a Captions layer to handle the descriptive text with word-level timing.

import VideoFlow from '@videoflow/core';

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

// 1. Add a background that stays for the whole duration
const bg = $.addImage(
  { fit: 'cover', opacity: 0.4, filterBlur: 5 },
  { source: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c' }
);

// 2. Iterate through your fetched commits
const commits = [
  { title: 'New Dark Mode', desc: 'A beautiful new theme for your eyes.' },
  { title: 'API Speedup', desc: 'Reduced latency by 40% using WebCodecs.' }
];

for (const commit of commits) {
  // Add the feature title
  const title = $.addText({
    text: commit.title,
    fontSize: 8,
    color: '#FF5A1F',
    position: [0.5, 0.4]
  });
  
  title.fadeIn('500ms');
  
  // Add a shape backdrop for the description
  const backdrop = $.addShape(
    { width: 80, height: 15, fill: '#000', opacity: 0.6, cornerRadius: 2, position: [0.5, 0.6] },
    { shapeType: 'rectangle', transitionIn: { transition: 'slideUp', duration: '600ms' } }
  );

  const desc = $.addText({
    text: commit.desc,
    fontSize: 4,
    color: '#fff',
    position: [0.5, 0.6]
  });

  $.wait('3s');

  // Clean up for the next feature
  title.fadeOut('400ms');
  desc.remove();
  backdrop.remove();
}

const json = await $.compile();

Headless Rendering in the Cloud

Once your VideoJSON is compiled, you need to turn it into an MP4. While you can render directly in the browser for quick previews, a production automation pipeline usually lives on a server.

Using @videoflow/renderer-server, you can deploy this script as a GitHub Action or a serverless function. It uses headless Chromium to ensure that the GLSL effects and transitions you see in the preview are rendered byte-for-byte identical in the final file.

As we discussed in our guide on how to render MP4s in Node.js without FFmpeg, this approach avoids the overhead of complex shell commands and gives you a typed, reliable output every time.

Why VideoFlow for Automation?

VideoFlow is built specifically for this "Video as Data" philosophy. Unlike proprietary cloud APIs that charge per minute of video, VideoFlow's core and renderers are Apache-2.0 open source. You can scale your automation as much as you want without worrying about rising costs.

Key features that make this work:

• Resolution Agnostic: Write your code once; render for TikTok (9:16) or YouTube (16:9) just by changing the project dimensions.
• Cinematic Primitives: Access 27 transition presets like glitchResolve and lightSweepReveal without writing custom shaders.
• Portable JSON: The VideoJSON output is easy to store in a database, version control, or pass between microservices.

Get Started

Ready to automate your product updates?

1. Try it out: Head over to the VideoFlow Playground to experiment with the builder API.
2. Read the Docs: Explore the full guide on core concepts to see what else you can animate.
3. Star on GitHub: Check out the source code and join the community at github.com/ybouane/VideoFlow.

By automating your video creation, you ensure that your product's progress is always visible, engaging, and cinematic—without ever leaving your terminal.