How to Build a YouTube Shorts Factory with TypeScript and VideoFlow

Automated video is the final frontier for modern SaaS. While we have mastered automated emails, dynamic dashboards, and real-time notifications, video remains a manual bottleneck for many engineering teams. Whether you are building an automated marketing engine, a social media automation tool, or a personalized onboarding flow, the ability to generate high-quality, vertical video at scale is a massive competitive advantage.

In this guide, we will walk through building a "YouTube Shorts Factory" using VideoFlow—an open-source TypeScript toolkit that turns plain JSON into rendered MP4s. We will cover the anatomy of a vertical video, how to use the fluent builder API, and how to run the whole pipeline headlessly on a server.

Why Automate YouTube Shorts?

YouTube Shorts (and their cousins, TikToks and Reels) are defined by a specific set of constraints: a 9:16 aspect ratio, fast-paced editing, and a heavy reliance on captions and visual overlays. Scaling this manually is impossible. If you need to produce 50 variations of a video for different localized markets, you can't have an editor sitting in After Effects all day.

By treating video as code, you gain three major benefits:

1. Consistency: Every video follows your brand's exact design system.
2. Scalability: Render 1 or 1,000 videos with the same amount of effort.
3. Portability: Your videos are defined as VideoJSON, which can be stored in a database, version-controlled, and rendered anywhere.

Step 1: Defining the Canvas

First, we need to initialize our project. For YouTube Shorts, we use a vertical resolution (1080x1920) and a standard 30 FPS.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({
  name: 'Shorts Factory',
  width: 1080,
  height: 1920,
  fps: 30,
  backgroundColor: '#000000',
});

Step 2: Layering Content

A typical Short consists of a background video, a progress bar, and dynamic captions. In VideoFlow, we add these using the $.add* methods. Remember the golden rule of the API: visual properties (like position and scale) go in the first argument, while resource settings (like the source URL) go in the second.

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

// 2. Add a progress bar (a simple ShapeLayer)
const progress = $.addShape(
  {
    width: 0, // start at 0 width
    height: 1, // 1em = 1% of width
    fill: '#FF5A1F',
    position: [0.5, 0.98], // bottom of the screen
  },
  { shapeType: 'rectangle' }
);

// Animate the progress bar across 60 seconds
progress.animate(
  { width: 0 },
  { width: 100 },
  { duration: '60s', wait: false }
);

Step 3: Dynamic Captions and Transitions

Captions are critical for vertical video. VideoFlow includes a dedicated addCaptions layer that can sync with your audio. For a more punchy "Shorts" feel, we can also add animated text overlays with cinematic transitions.

const title = $.addText({
  text: '5 TIPS FOR DEVS',
  fontSize: 8,
  color: '#ffffff',
  fontWeight: 900,
  position: [0.5, 0.3],
}, {
  transitionIn: { transition: 'blurResolve', duration: '500ms' },
  transitionOut: { transition: 'fade', duration: '300ms' }
});

$.wait('3s');
title.remove();

Step 4: Headless Server Rendering

Once your flow is defined, you need to turn it into an MP4. While you can preview and export in the browser using the browser renderer, a "factory" usually runs on the server.

VideoFlow's @videoflow/renderer-server uses headless Chromium to render frames with pixel-perfection. Unlike traditional FFmpeg-based pipelines, it doesn't require FFmpeg to be installed on the host system by default—it uses WebCodecs for high-efficiency encoding.

import '@videoflow/renderer-server';

// ... build your flow ...

await $.renderVideo({
  outputType: 'file',
  output: './factory-output.mp4',
  verbose: true,
});

This approach is significantly more robust than chaining FFmpeg shell commands. You get a typed, predictable API and the same output whether you are previewing in the DOM renderer or rendering a batch job in a Node worker.

Scaling Your Factory

If you are building a larger system, you might want to look at our guide on Programmatic Video Localization: Scaling Multilingual Content with VideoFlow, which explores how to swap text and audio tracks dynamically based on a data source.

By combining VideoFlow with a simple queue system (like BullMQ or Amazon SQS), you can build a production-grade video pipeline that handles hundreds of concurrent renders. Because VideoFlow is Apache-2.0, you can scale your infrastructure without worrying about proprietary core licenses.

Get Started

Ready to build your own factory? Here is how to dive in:

• Explore the Docs: Check out the Core Concepts to understand the timing model.
• Try the Playground: Paste your code into the Interactive Playground and see it render in real-time.
• Star the Repo: Join the community on GitHub and help us build the future of video-as-code.

Happy rendering!