Automating E-commerce: Generating Product Videos from a JSON Feed

High-volume e-commerce marketing is a battle of relevance. In a world where every SKU needs a social-ready video, manual editing is a bottleneck. Programmatic video generation turns your product catalog from a static spreadsheet into a dynamic video factory.

By treating video as data, you can generate personalized, high-conversion product showcases for thousands of items in minutes. In this guide, we'll show you how to build an automated e-commerce video pipeline using VideoFlow and a simple JSON feed.

Why Your E-commerce Pipeline Needs Programmatic Video

Static images no longer cut it on social feeds. Video drives higher engagement, but producing it at scale is traditionally expensive and slow. Moving your video production into code—specifically using a portable format like VideoJSON—allows you to:

1. Scale Instantly: Generate videos for your entire catalog whenever a price changes or a new collection drops.
2. Reduce Costs: Eliminate the need for expensive rendering farms or manual video editors for routine product updates.
3. Personalize at Scale: Inject customer names, local currency, or targeted offers directly into the video timeline.

The Product Video Architecture

To build a product video factory, we need to map our JSON product data to visual layers. We'll use the @videoflow/core builder to create a template that accepts product attributes—like title, price, and image URL—and turns them into a cinematic sequence.

Mapping JSON to VideoFlow Layers

Imagine a standard product feed:

{
  "id": "sku-123",
  "name": "Ultra-Lite Running Shoes",
  "price": "$89.99",
  "image": "https://example.com/shoes.jpg",
  "brandColor": "#FF5A1F"
}

We can map this data directly to $.addImage and $.addText calls. The key to VideoFlow's efficiency is its resolution-agnostic authoring. Because we use em units (where 1em = 1% of project width), the same code will render perfectly for a square Instagram post or a vertical TikTok video.

Building the Template

Here is a concise implementation of an automated product showcase:

import VideoFlow from '@videoflow/core';

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

  // 1. Product Background
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.8 },
    { source: product.image }
  );
  
  // Add a subtle zoom-in effect
  bg.animate({ scale: 1 }, { scale: 1.1 }, { duration: '5s', wait: false });

  // 2. Product Name with a slide-in transition
  const title = $.addText(
    {
      text: product.name,
      fontSize: 7,
      color: '#ffffff',
      fontWeight: 800,
      position: [0.5, 0.2]
    },
    { transitionIn: { transition: 'slideUp', duration: '800ms' } }
  );

  $.wait('1s');

  // 3. Dynamic Price Badge
  const price = $.addShape(
    {
      width: 40,
      height: 12,
      fill: product.brandColor,
      position: [0.5, 0.8],
      effects: [{ effect: 'glow', params: { strength: 0.5 } }]
    },
    { 
      shapeType: 'rectangle', 
      transitionIn: { transition: 'zoom', duration: '500ms' } 
    }
  );

  $.addText({
    text: product.price,
    fontSize: 5,
    color: '#ffffff',
    position: [0.5, 0.8]
  });

  $.wait('3s');
  
  return await $.compile();
}

Rendering at Scale: Browser vs. Server

One of the unique advantages of VideoFlow is the flexibility of its official renderers.

For an e-commerce platform, you might choose different strategies based on the use case:

• Client-Side Export: Use @videoflow/renderer-browser to let sellers export videos directly in their browser tab. This offloads the compute cost to the user and uses WebCodecs for high-speed MP4 generation without a server.
• Headless Batch Rendering: Use @videoflow/renderer-server in a Node.js environment to generate videos in the background. This is ideal for syncing your entire product catalog to a video ad platform every night.

Unlike other tools that require complex FFmpeg shell scripts, VideoFlow's server renderer uses headless Chromium to ensure that what you see in the Playground is exactly what you get in the final MP4.

Advanced Cinematic Touches

To make your automated videos feel premium, VideoFlow includes 27 transition presets and 42 GLSL effects out of the box. You can stack effects like bloom or vignette on your product images to create a high-end editorial feel without touching After Effects.

For example, adding a lightSweepReveal transition to your price badge can make the offer feel urgent and high-energy. These primitives are described in detail in our transitions guide.

Conclusion

Automating your e-commerce video production doesn't just save time—it opens up new creative possibilities for personalization and real-time marketing. By bridging the gap between your JSON data and cinematic video, VideoFlow empowers engineering teams to build video-first experiences that scale.

Ready to build your own video factory? Explore our getting started guide, check out more examples, or dive into the source on GitHub. If you're coming from other tools, see how we compare in our guide on dynamic social video generation at scale.

Happy rendering!