Personalized Video at Scale: Build a SaaS Year in Review Engine

Every December, the internet lights up with "Year in Review" recaps. From Spotify Wrapped to GitHub Skyline, users love seeing their own data transformed into a cinematic story. For SaaS founders and engineering teams, these personalized videos are retention gold—they drive social shares, celebrate user milestones, and turn dry metrics into emotional experiences.

But building a personalized video engine has historically been a nightmare. You either had to maintain fragile FFmpeg shell scripts, pay exorbitant per-minute fees to proprietary APIs, or build a complex rendering farm from scratch.

In this guide, we’ll show you how to build a scalable personalized video engine using VideoFlow, our open-source TypeScript toolkit. We'll move from raw data to rendered MP4s using nothing but code.

The Architecture of Personalization

Traditional video editing is destructive; once you render a clip, the pixels are baked. VideoFlow changes the game by treating video as data.

Because a VideoFlow project compiles into a portable VideoJSON document, your personalization logic becomes a simple mapping function. You take a user's database record (e.g., "Total Tasks Completed: 452") and inject it into a template.

1. Defining the Template

Instead of a timeline in a GUI, you define your scene using the @videoflow/core builder. Note how we use normalized coordinates ([0.5, 0.5]) and em units for font sizes. This ensures the video looks identical whether you render it at 720p for a mobile app or 4K for a desktop dashboard.

import VideoFlow from '@videoflow/core';

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

  // Add a background image from the user's most active project
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.4, filterBlur: 10 },
    { source: userData.heroImage }
  );

  // Add the personalized headline
  const title = $.addText({
    text: `Congrats, ${userData.name}!`,
    fontSize: 8,
    color: '#FF5A1F',
    position: [0.5, 0.4],
  });
  title.fadeIn('800ms');

  $.wait('1s');

  // Show the big metric
  const metric = $.addText({
    text: `${userData.taskCount} Tasks Done`,
    fontSize: 12,
    fontWeight: 800,
    position: [0.5, 0.6],
  });
  metric.animate({ scale: 0.8 }, { scale: 1.1 }, { duration: '2s' });

  return $;
}

Cinematic Polish with Zero Effort

Personalized video shouldn't look like a slide deck. VideoFlow ships with 27 transition presets and 42 GLSL effects that you can stack to create high-end motion graphics.

Want to add a chromatic aberration effect when the user's name appears? Or a blurResolve transition between scenes? It’s a single line of code. Because these effects are written in GLSL and rendered via WebGL, they are incredibly fast and look professional.

// Adding a cinematic glow and a transition
const highlight = $.addShape(
  {
    width: 80, height: 20,
    fill: '#FF5A1F',
    effects: [{ effect: 'glow', params: { strength: 0.5 } }]
  },
  {
    shapeType: 'rectangle',
    transitionIn: { transition: 'slideUp', duration: '500ms' }
  }
);

Check out our Core documentation for the full list of available presets.

Rendering at Scale: Browser vs. Server

This is where VideoFlow’s "Three Renderer Rule" becomes a superpower for SaaS teams.

1. The Live Preview: Use @videoflow/renderer-dom to show the user a frame-accurate, 60fps preview of their video directly in your React dashboard. They can scrub the timeline and see their data update in real-time.
2. The Client-Side Export: If you want to save on server costs, use @videoflow/renderer-browser. It leverages WebCodecs to render and encode the MP4 directly in the user's browser tab. Zero cloud compute required.
3. The Batch Pipeline: For automated email campaigns, use @videoflow/renderer-server. It runs in Node.js, driving a headless Chromium instance to render thousands of videos in the background.

Running a Server-Side Render

To generate an MP4 on your backend, you simply compile your project to JSON and pass it to the server renderer. By default, VideoFlow uses a high-performance WebCodecs pipeline inside the browser, meaning you don't even need FFmpeg installed on your server.

import '@videoflow/renderer-server';

const $ = createYearInReview(userData);

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

Why Apache-2.0 Matters

When you build your core product features on a third-party video API, you're taking on massive platform risk and scaling costs. VideoFlow is Open Source (Apache-2.0). The core builder and all three renderers are free to use, modify, and embed in your commercial SaaS forever.

Whether you are building a "Year in Review" engine, an automated social media factory, or a personalized onboarding flow, VideoFlow gives you the primitives to treat video as a first-class citizen in your stack.

Get Started

Ready to build your first personalized video?

• Try it now: Head over to the VideoFlow Playground to experiment with the builder API in your browser.
• Read the Guides: Check out our Getting Started guide to set up your first project.
• Star us on GitHub: Follow the development and contribute at github.com/ybouane/VideoFlow.

Stop fighting with FFmpeg strings. Start composing videos.