The 50-Line YouTube Shorts Factory: Programmatic Video with VideoFlow

Manual video editing is a bottleneck that kills content strategies. If you're building a YouTube Shorts channel or a social automation tool, you don't want to be dragging clips around a timeline in After Effects or Premiere Pro. You want a pipeline where you can feed in a script, a background clip, and some audio, and get a high-quality vertical MP4 out the other side.

In this tutorial, we'll build a "Shorts Factory" in under 50 lines of TypeScript using VideoFlow. We'll leverage the official builder API to compose a professional vertical video with automated captions, cinematic transitions, and background music.

The Anatomy of an Automated Short

A high-performing Short usually consists of four main ingredients:

1. A vertical canvas: 1080x1920 (9:16 aspect ratio).
2. Background footage: A looping or long-form video clip.
3. Dynamic captions: Word-by-word or sentence-by-sentence text overlays.
4. Background audio: Music or voiceovers that drive the pace.

VideoFlow makes this trivial because it treats these elements as layers in a portable VideoJSON document. You define the logic once, and it renders identically in the browser or on a headless server.

Building the Factory

Let's look at the code. We'll use @videoflow/core to define our scene. Notice how we use the CaptionsLayer to handle the timing-heavy work of displaying text.

import VideoFlow from '@videoflow/core';

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

// 1. Add background video
const bg = $.addVideo(
  { fit: 'cover', opacity: 0.7 },
  { source: 'https://assets.example.com/background-loop.mp4' }
);

// 2. Add background music
$.addAudio({ volume: 0.4 }, { source: 'https://assets.example.com/lofi-beat.mp3' });

// 3. Add automated captions
// The captions setting takes an array of { caption, startTime, endTime } objects.
const captions = $.addCaptions(
  {
    fontSize: 8,           // 8% of project width
    color: '#FF5A1F',      // VideoFlow Orange
    fontWeight: 800,
    position: [0.5, 0.5],  // Centered
    textShadowColor: 'rgba(0,0,0,0.5)',
    textShadowBlur: 10,
  },
  {
    captions: [
      { caption: 'Building a factory...', startTime: 0, endTime: 1.5 },
      { caption: '...with 50 lines of code.', startTime: 1.5, endTime: 3.5 },
      { caption: 'VideoFlow is the future.', startTime: 3.5, endTime: 5.5 },
    ],
    maxLines: 1,
  }
);

// 4. Add a cinematic entry for the captions
captions.fadeIn('600ms');

// 5. Run the factory for 6 seconds
$.wait('6s');

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

This script produces a standard VideoJSON object. You can preview this instantly in our Playground to see the timing in action.

Rendering at Scale: Browser vs Server

Once you have your VideoJSON, you need to turn it into an MP4. This is where VideoFlow's "Three Renderers" rule shines.

If you're building a tool for end-users, you can use @videoflow/renderer-browser to export the video directly in their tab using the WebCodecs API. This costs you zero in server fees.

If you're building a batch processing pipeline (the true "factory" model), you'll want to use @videoflow/renderer-server in a Node.js environment. It uses headless Chromium to render frames with pixel-perfect accuracy, and it doesn't even require FFmpeg to be installed by default.

How VideoFlow Handles YouTube Shorts Automation

VideoFlow was designed specifically for this kind of programmatic composition. Unlike traditional video editors, @videoflow/core doesn't care about a visual timeline during the authoring phase. It cares about flow.

By using primitives like $.wait() and the CaptionsLayer, you eliminate the manual frame-math that makes video automation so fragile in other tools. If you decide to change the background video or the font size, you change one line of code, and the entire factory updates.

Start Building Your Factory

Ready to automate your video content? You can find the full source code for this example and many others in our official documentation.

VideoFlow is open-source (Apache-2.0), so you can start building today without any licensing hurdles. Head over to the VideoFlow GitHub repository to star the project, or try your first script in the Playground.