How to Automate Video Creation from Markdown with VideoFlow

If you've ever tried to build a video automation pipeline, you know the pain: brittle FFmpeg shell scripts, proprietary APIs that charge per minute, or complex React-based frameworks that require a full frontend stack just to render a single frame.

But what if your video source of truth was just plain text? By treating video as data—specifically Markdown—you can build robust content factories that are easy to maintain, version-control, and scale. In this guide, we'll show you how to build a Markdown to MP4 pipeline using VideoFlow.

Why Automate Video Creation from Markdown?

Markdown is the lingua franca of developer documentation and content management. It's human-readable, machine-parseable, and diffable. When you automate video creation from Markdown, you unlock several powerful use cases:

• Automated Explainer Videos: Turn your project's CHANGELOG.md or README.md into a weekly video update.
• Scalable Social Content: Generate hundreds of tips or quotes for social media from a single text file.
• Personalized Onboarding: Create custom video walkthroughs for users based on their specific profile data.

Unlike traditional video editing, VideoFlow allows you to automate video creation by compiling a fluent TypeScript API into a portable VideoJSON document.

Step 1: Parsing Markdown into Video Layers

VideoFlow doesn't include a Markdown parser out of the box (to keep the core lightweight), but it's trivial to map Markdown tokens to VideoFlow layers. For this example, we'll use a simple approach: H1 headers become titles, and standard text blocks become captions.

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

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

async function createVideoFromMarkdown(markdownContent) {
  // A simplified parser logic
  const lines = markdownContent.split('\n');
  
  for (const line of lines) {
    if (line.startsWith('# ')) {
      // Map H1 to a Title Layer
      const title = $.addText({
        text: line.replace('# ', ''),
        fontSize: 8,
        color: '#FF5A1F', // VideoFlow Orange
        fontWeight: 700,
        position: [0.5, 0.4],
      });
      
      title.fadeIn('800ms');
      $.wait('2s');
      title.fadeOut('500ms');
    } else if (line.trim().length > 0) {
      // Map text to a Captions Layer
      $.addCaptions(
        { fontSize: 4, color: '#fff', position: [0.5, 0.8] },
        { 
          captions: [{ caption: line.trim(), startTime: 0, endTime: 3 }],
          maxCharsPerLine: 40 
        }
      );
      $.wait('3.5s');
    }
  }

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

Step 2: Adding Cinematic Polish

One of the biggest advantages of VideoFlow over raw FFmpeg is the built-in library of cinematic transitions and effects. You don't have to calculate frame math for a blur or a fade; you just declare it.

For our Markdown video, let's add a background image with a subtle blur effect and a blurResolve transition for our titles:

const bg = $.addImage(
  { fit: 'cover', opacity: 0.5 },
  { 
    source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe',
    transitionIn: { transition: 'fade', duration: '1s' }
  }
);

// Add a constant subtle blur to the background
bg.set({ effects: [{ effect: 'gaussianBlur', params: { radius: 0.2 } }] });

const title = $.addText(
  { text: 'Markdown Automation', fontSize: 7 },
  { transitionIn: { transition: 'blurResolve', duration: '800ms' } }
);

Step 3: Headless Rendering on the Server

Because VideoFlow is built on top of portable VideoJSON, you can author your video logic anywhere and render it on a server. The @videoflow/renderer-server package uses headless Chromium to render frames with perfect accuracy, without requiring FFmpeg to be installed on your host machine by default.

This makes it perfect for serverless environments or CI/CD pipelines. You can trigger a render every time you push a change to your documentation, ensuring your explainer videos are always up to date.

How VideoFlow Handles the Heavy Lifting

VideoFlow provides the bridge between simple data structures (like Markdown) and high-fidelity video output.

• @videoflow/core: Provides the fluent builder API that makes it easy to map text tokens to visual layers.
• Resolution Agnostic: Since units are in em (1% of project width), your Markdown-generated video will look identical whether you render it at 720p for social media or 4K for a presentation.
• The Three-Renderer Rule: You can preview your Markdown video in real-time using the DOM renderer, let users export it directly in their browser with the WebCodecs-based browser renderer, or batch-process it on the server.

Start Automating Today

Stop fighting with timeline-based editors for repetitive tasks. By treating video as code, you gain the power of automation, versioning, and programmatic scale.

Ready to see your text come to life? Head over to the VideoFlow Playground to experiment with the builder API, check out the full documentation, or star the project on GitHub.