Building a YouTube Shorts Factory with VideoFlow and TypeScript

Manual video editing is the ultimate bottleneck for content creators. Whether you are building an automated news channel, a daily facts account, or a SaaS marketing engine, the workflow is usually the same: find a clip, overlay some text, add a progress bar, and export. Doing this once is easy; doing it every day for a year is a recipe for burnout.

This is where an automated YouTube Shorts factory comes in. By treating video as code, we can turn a spreadsheet or a JSON feed into a pipeline of high-quality vertical videos. In this tutorial, we will build a programmatic video engine using VideoFlow, an open-source TypeScript toolkit that makes rendering MP4s as easy as writing a UI.

Why Programmatic Video?

Traditional video pipelines often rely on fragile FFmpeg shell scripts or expensive, proprietary APIs. VideoFlow changes the game by providing a typed, fluent builder API that compiles to a portable JSON format. Because it is Apache-2.0 licensed, you can run your factory on your own infrastructure without worrying about per-minute rendering costs.

Step 1: Setting Up the Factory

First, we need to initialize our project with a vertical resolution (1080x1920). VideoFlow is resolution-agnostic, meaning it uses relative units for positioning and sizing, so your templates will look identical whether you render in 720p or 4K.

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

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

Step 2: Designing the Template

A standard YouTube Short usually consists of three main elements: a background video, centered captions, and a branded progress bar. Let’s build that template using the VideoFlow core builder API.

Background and Overlays

We start by adding our background footage. We use fit: 'cover' to ensure it fills the vertical frame, and we apply a subtle gaussianBlur effect to make the text pop.

const bg = $.addVideo(
  { 
    fit: 'cover', 
    opacity: 0.7,
    effects: [{ effect: 'gaussianBlur', params: { radius: 0.5 } }]
  },
  { source: 'https://assets.example.com/nature-bg.mp4' }
);

Dynamic Captions

Next, we add the text. In VideoFlow, fontSize is measured in em, where 1em equals 1% of the project width. This ensures our text scales perfectly with our resolution.

const title = $.addText({
  text: '5 FACTS ABOUT TYPESCRIPT',
  fontSize: 8,
  color: '#FF5A1F', // VideoFlow Orange
  fontWeight: 800,
  position: [0.5, 0.4] // Centered horizontally, 40% from top
});

title.fadeIn('600ms');
$.wait('2s');

Step 3: The Progress Bar

To keep viewers engaged, we can add a progress bar at the bottom using addShape. We will animate its width property from 0 to 100 over the duration of the clip.

const progress = $.addShape(
  {
    width: 0,
    height: 1, // 1% of project width
    fill: '#FF5A1F',
    position: [0.5, 0.95]
  },
  { shapeType: 'rectangle' }
);

// Animate across 10 seconds without advancing the flow
progress.animate(
  { width: 0 },
  { width: 100 },
  { duration: '10s', easing: 'linear', wait: false }
);

Step 4: Rendering at Scale

Once your template is ready, you can loop through your data and render individual MP4s. Since we are running in Node.js, we use @videoflow/renderer-server. Unlike other tools, VideoFlow can render MP4s in Node without FFmpeg by default, using a headless browser engine for maximum fidelity.

async function generateShort(data) {
  // ... add layers based on data ...

  await $.renderVideo({
    outputType: 'file',
    output: `./renders/short-${data.id}.mp4`,
  });
}

Scaling Your Factory

This is just the beginning. Because VideoFlow produces a portable VideoJSON document, you can preview your factory's output in real-time using the VideoFlow Playground or embed a live preview directly into your own dashboard using our official renderers.

If you want to take it a step further, you can even drop the @videoflow/react-video-editor component into your internal tools to allow manual tweaks to the automated templates before they go live.

Ready to start building? Check out the VideoFlow documentation or star the project on GitHub to join the community of developers reimagining video production.