JSON as the New MP4: Treating Video Like Markdown in Your CI/CD Pipeline

For decades, video has been treated as a "black box" binary. Whether it's an .mp4 or a .mov, these files are heavy, opaque, and impossible to track in version control. If you change a single frame in a traditional editor, your git diff is just a meaningless blob of binary noise.

In a world where everything is code—from infrastructure to documentation—video has remained the final frontier of manual toil. But what if we treated video like Markdown? What if your video pipeline was a series of human-readable, diffable instructions that could be audited, versioned, and rendered automatically in your CI/CD pipeline?

Welcome to the era of VideoJSON.

The Portability of VideoJSON

At the heart of VideoFlow is a simple realization: a video is just a sequence of layers and animations over time. By representing this sequence as a portable JSON document, we decouple the intent of the video from the rendering of it.

Unlike proprietary project files from After Effects or even the React component trees of Remotion, VideoJSON is a documented, resolution-agnostic schema. You can store it in a Postgres JSONB column, send it across a WebSocket, or—most importantly—commit it to a git repository.

One Source, Three Renderers

The true power of treating video as data is the ability to render it anywhere. Because VideoFlow separates the builder from the renderer, the same JSON document can be consumed by any of the three official VideoFlow renderers:

1. @videoflow/renderer-browser: Perfect for client-side exports. It uses WebCodecs to render MP4s directly in the user's tab, saving you massive server costs.
2. @videoflow/renderer-server: A headless Node.js renderer that drives Chromium. Ideal for batch processing and automated pipelines.
3. @videoflow/renderer-dom: A frame-accurate 60fps live preview for your web apps. It allows users to scrub through the timeline with zero latency.

By using the VideoFlow Core API, you can build a pipeline that lets a user edit a video in the browser, preview it instantly, and then trigger a high-quality server-side render—all from the same source of truth.

Diffing the Timeline

When your video is code, you get the full suite of developer tools for free. Want to see what changed between the "Spring Promo" and the "Summer Sale"? You don't need to watch two videos side-by-side. You just run git diff.

Because VideoFlow uses a fluent builder that compiles to a stable JSON structure, changes to text, timing, or effects appear as clear line-item updates. This makes diffable video versioning a reality for engineering teams.

Automating the Pipeline

Let's look at how this fits into a real-world CI/CD flow. Imagine a scenario where every time you update your product's pricing in a config file, a new promotional video is automatically generated and uploaded to your CDN.

Using @videoflow/renderer-server, you can script this in a few lines of TypeScript:

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

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

// Load your data (e.g., from a JSON config or database)
const pricing = await getLatestPricing();

$.addText({
  text: `Now only ${pricing.amount}!`,
  fontSize: 8,
  color: '#FF5A1F',
  position: [0.5, 0.5]
}).fadeIn('500ms');

$.wait('3s');

// Render directly to a file in your CI environment
await $.renderVideo({
  outputType: 'file',
  output: './build/promo.mp4'
});

This script doesn't require FFmpeg to be installed on your build agent by default—it uses the built-in WebCodecs pipeline inside headless Chromium. It’s clean, portable, and fits perfectly into a GitHub Action or a GitLab CI runner.

Why Your Pipeline Should Be Diffable

Treating video as Markdown isn't just a neat trick; it's a fundamental shift in how teams build content. It reduces the "bus factor" of video production, enables automated QA, and allows LLM agents to participate in the creative process by emitting JSON instead of wrestling with binary encoders.

If you're ready to stop treating video like a black box, head over to the VideoFlow Playground to see the JSON in action, or check out our getting started guide to build your first pipeline.

Ready to dive into the code? Find us on GitHub.