Automating E-commerce: How to Generate 1,000 Product Videos with TypeScript

E-commerce moves at the speed of data, but video production often moves at the speed of a human editor. If you have a catalog of 10,000 items, manual video creation isn't just expensive—it's impossible. To keep up with personalized ads, social commerce, and dynamic product updates, you need a way to automate product videos directly from your database.

In this tutorial, we’ll build a scalable pipeline that turns a product JSON object into a high-quality MP4. We'll use VideoFlow, an open-source toolkit that treats video like code, allowing you to build complex timelines using a type-safe TypeScript API.

Why Programmatic Video for E-commerce?

Traditional video workflows rely on heavy GUI tools or fragile FFmpeg shell scripts. For developers, this creates a bottleneck. By shifting to a programmatic approach, you gain three critical advantages:

1. Massive Scale: Generate thousands of unique videos for the cost of a few compute cycles.
2. Personalization: Inject user-specific data (names, local pricing, regional offers) at the moment of render.
3. Maintainability: Treat your video templates like any other part of your tech stack—version-controlled, diffable, and testable.

Step 1: Defining the Video Template

In VideoFlow, a video is constructed using a fluent builder API. Instead of thinking in frames, you think in layers and flow. Let's create a function that takes a product object and returns a compiled VideoJSON document.

import VideoFlow from '@videoflow/core';

export async function createProductVideo(product) {
  const $ = new VideoFlow({ width: 1080, height: 1920, fps: 30 });

  // 1. Add a cinematic background
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.8 },
    { source: product.heroImageUrl }
  );

  // 2. Add an animated product title
  const title = $.addText({
    text: product.name,
    fontSize: 8,
    color: '#FFFFFF',
    fontWeight: 700,
    position: [0.5, 0.4]
  });

  title.fadeIn('600ms');

  // 3. Add a light sweep effect to the price
  const price = $.addText({
    text: `$${product.price}`,
    fontSize: 10,
    color: '#FF5A1F',
    position: [0.5, 0.55],
    effects: [
      { effect: 'lightSweep', params: { strength: 0.5 } }
    ]
  });

  price.fadeIn('800ms');

  $.wait('4s');

  return $.compile();
}

This snippet demonstrates the core power of the VideoFlow builder API. We aren't just overlaying text; we're applying cinematic effects like lightSweep and using normalized coordinates ([0.5, 0.4]) that ensure our video looks perfect whether we render at 720p or 4K.

Step 2: Adding Cinematic Polish

E-commerce videos need to grab attention in the first second. VideoFlow ships with 27 transition presets and 42 GLSL effects out of the box. Unlike other tools where you have to build animations from scratch, you can simply declare them in your settings.

For a product showcase, we might use a blurResolve transition for the image and a bloom effect to make the product pop:

const productImg = $.addImage(
  {
    fit: 'contain',
    effects: [{ effect: 'bloom', params: { strength: 0.3 } }]
  },
  {
    source: product.imageUrl,
    transitionIn: { transition: 'blurResolve', duration: '1s' }
  }
);

This level of visual fidelity is why developers are migrating from FFmpeg to VideoJSON. You get the power of a professional compositor with the simplicity of a JSON object.

Step 3: Scaling with the Server Renderer

Once you have your VideoJSON, you need to render it into an MP4. While you can render in the browser for client-side tools, a bulk e-commerce pipeline usually runs on the server.

The @videoflow/renderer-server package uses headless Chromium to render your video. Crucially, it uses a WebCodecs-based pipeline that does not require FFmpeg to be installed on your server by default. This makes deployment to environments like AWS Lambda or Vercel significantly easier.

import '@videoflow/renderer-server'; // Registers the server renderer

const json = await createProductVideo(myProduct);
const $ = new VideoFlow(); // Use a fresh instance for rendering

await $.renderVideo({
  project: json,
  outputType: 'file',
  output: `./videos/${myProduct.id}.mp4`
});

How VideoFlow Handles the Heavy Lifting

VideoFlow was built to solve the specific pain points of programmatic video. While tools like Remotion are powerful, VideoFlow offers a few key distinctions for engineering teams:

• Apache-2.0 License: The core and all renderers are truly open-source. You can embed them in commercial products without licensing fees.
• Portable JSON: Because your video is defined as a JSON document, it's trivial for an LLM or an agent to emit. You can even store your video timelines in a Postgres JSONB column.
• Identical Output: The three official renderers (Browser, Server, and DOM) produce byte-for-byte identical results. You can preview your video in a live 60fps React editor and know exactly what the server-rendered MP4 will look like.

Get Started with Video Automation

Automating your product video production doesn't require a team of motion designers. With a few lines of TypeScript, you can build a pipeline that handles everything from simple overlays to complex, effect-heavy cinematic trailers.

Ready to build? Here is how to dive in:

• Try the Playground: Experiment with the builder API in your browser at the VideoFlow Playground.
• Read the Docs: Check out the Getting Started guide for a deep dive into layers and timing.
• Explore the Source: Join the community and contribute on GitHub.

Stop wrangling shell scripts and start building video like an engineer. Your product catalog—and your marketing team—will thank you.