Automating YouTube Shorts: Build a Vertical Video Factory in 30 Lines of TypeScript

Short-form video is the lifeblood of modern discovery, but the manual effort required to edit vertical clips, sync captions, and render exports is a massive bottleneck. If you are building a content automation platform or just trying to scale your own social presence, you don't need a video editor—you need a factory.

In this tutorial, we will build a programmatic "Shorts Factory" using VideoFlow. We'll take a raw horizontal video, crop it for vertical 9:16 delivery, and overlay high-impact, word-level animated captions—all in about 30 lines of TypeScript.

Why Programmatic Video Beats Manual Editing

Traditional video editing is a linear, destructive process. To change a font or a background across 50 videos, you'd spend hours in a GUI. With VideoFlow, your videos are defined as portable VideoJSON. This means you can version-control your edits, diff changes, and generate thousands of variations just by swapping a JSON object.

Compared to legacy solutions like FFmpeg shell scripts, VideoFlow provides a typed, fluent API that handles cinematic primitives like word-level highlighting and GLSL effects out of the box.

The "Shorts Factory" Implementation

To get started, make sure you have @videoflow/core and a renderer installed. For this example, we'll use the official renderers to output a vertical MP4.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({
  width: 1080,
  height: 1920, // Vertical 9:16 aspect ratio
  fps: 30,
});

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

// 2. Add high-impact animated captions
const captions = $.addCaptions(
  {
    fontSize: 8, // 8% of project width
    fontWeight: 800,
    color: '#FF5A1F', // VideoFlow orange
    position: [0.5, 0.5],
    textAlign: 'center',
    effects: [{ effect: 'glow', params: { strength: 0.5 } }]
  },
  {
    captions: [
      { caption: 'THE FUTURE', startTime: 0, endTime: 1.2 },
      { caption: 'OF VIDEO', startTime: 1.3, endTime: 2.2 },
      { caption: 'IS CODE', startTime: 2.3, endTime: 3.5 },
    ],
    maxCharsPerLine: 15,
  }
);

// 3. Define the flow and compile
$.wait('3.5s');
const videoJson = await $.compile();

How VideoFlow Handles Vertical Layouts

One of the most powerful features of VideoFlow is that it is resolution-agnostic. Because we use normalized coordinates (0 to 1) and em units (1% of project width), the same code works perfectly whether you are rendering for a 1080p Short or a 4K cinematic trailer.

In the example above, position: [0.5, 0.5] ensures the text is dead-center regardless of the aspect ratio. This is a significant advantage over tools that require manual pixel math for every different output format.

Adding the Cinematic Polish

To make your Shorts stand out, you can stack any of VideoFlow's 42 GLSL effects. In our factory, we added a glow effect to the captions, but you could easily add vhsDistortion to the background or a blurResolve transition to the intro.

If you're looking to automate this even further, you can combine this with our guide on Programmatic Video Localization to generate localized versions of your Shorts for different markets automatically.

Scale Your Content Factory

Building a video pipeline shouldn't feel like fighting with legacy tools. Whether you are rendering on the server with @videoflow/renderer-server or letting users export directly in their browser with @videoflow/renderer-browser, VideoFlow gives you the primitives to build professional media software.

Ready to start building? Head over to the VideoFlow Playground to experiment with these snippets live, check out the full documentation, or star the project on GitHub.