Automated Weekly Recaps: Building a Personalized Video Engine for Your SaaS

Every SaaS company has a mountain of data about how their users spend time in their product. From project management dashboards to fitness trackers, this data is usually locked in static charts or long-form emails. But what if you could turn those metrics into a cinematic, personalized video recap that lands in your user's inbox every Monday morning?

Building an automated video engine used to mean wrestling with brittle FFmpeg shell scripts or paying exorbitant per-minute fees to proprietary APIs. With VideoFlow, you can build a full-featured video pipeline in pure TypeScript, treat videos as portable JSON, and render them anywhere—from AWS Lambda to the user's browser.

In this guide, we'll walk through building a personalized weekly recap engine that scales to thousands of users without the overhead of a traditional video editing suite.

Why Personalized Video is the New Standard

Static emails are easy to ignore. Personalized video, however, creates a 'wow' moment that drives retention and engagement. Whether it's a 'Year in Review' or a 'Weekly Progress Report,' video allows you to tell a story with data.

The challenge has always been the cost and complexity of rendering. Traditional tools require a server-side GPU or a complex FFmpeg setup. VideoFlow changes the equation by providing an Apache-2.0 core and renderers that produce byte-for-byte identical output across the browser and the server.

Step 1: Defining the Video Schema

At the heart of VideoFlow is the VideoJSON schema. Instead of thinking in terms of layers and keyframes in a GUI, you define your video as a sequence of builder calls. This makes it trivial for an LLM or a simple data script to emit a video timeline.

Here is how we might define a simple 'Weekly Recap' scene with a user's name and a 'Tasks Completed' metric:

import VideoFlow from '@videoflow/core';

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

  // Add a background image
  $.addImage(
    { fit: 'cover', opacity: 0.4 },
    { source: 'https://assets.yoursaas.com/bg-pattern.jpg' }
  );

  // Animated welcome text
  const welcome = $.addText({
    text: `Hi, ${userData.name}!`,
    fontSize: 8,
    color: '#FF5A1F',
    position: [0.5, 0.4],
  });

  welcome.fadeIn('600ms');
  $.wait('2s');
  welcome.fadeOut('400ms');

  // Show the big metric
  const metric = $.addText({
    text: `${userData.tasksDone} Tasks Done`,
    fontSize: 10,
    fontWeight: 800,
    color: '#fff',
    position: [0.5, 0.5],
  }, {
    transitionIn: { transition: 'blurResolve', duration: '800ms' }
  });

  $.wait('3s');
  metric.fadeOut('500ms');

  return await $.compile();
}

Step 2: Adding Cinematic Polish

One of the biggest advantages of VideoFlow over raw FFmpeg is the built-in library of 27 transition presets and 42 GLSL effects. You don't need to write custom shaders to get a professional look.

For a SaaS recap, you might want to add a vignette or a bloom effect to your background to make the white text pop. Because every property in VideoFlow is animatable, you can even animate the strength of a blur effect as the video progresses.

Step 3: Headless Server-Side Rendering

Once you have your VideoJSON, you need to render it into an MP4. If you are building an automated factory, you'll likely use @videoflow/renderer-server. This renderer uses headless Chromium to drive the frame-perfect export process.

Unlike other solutions, VideoFlow's server renderer does not require FFmpeg to be installed by default—it uses WebCodecs inside the browser for high-performance encoding. This makes it perfect for deployment in restricted environments like AWS Lambda or Google Cloud Run.

import '@videoflow/renderer-server';

const json = await generateRecap({ name: 'Alex', tasksDone: 42 });
const $ = VideoFlow.fromJSON(json);

await $.renderVideo({
  outputType: 'file',
  output: './recap-alex.mp4',
});

For a deeper dive into building APIs, check out our tutorial on Building a Video Rendering API with Node.js and VideoFlow.

Step 4: The 'Edit and Preview' Loop

If you want to give your users the ability to customize their recaps before they render, you can drop the @videoflow/react-video-editor into your dashboard. It provides a full multi-track timeline and inspector that works with the exact same schema your backend uses.

This 'Three-Renderer Rule' is what makes VideoFlow unique: preview in the DOM at 60fps, edit in React, and render the final MP4 on the server—all from one source of truth.

Start Building Your Video Engine

Personalized video doesn't have to be a multi-month engineering project. By treating video as data and leveraging a modern rendering stack, you can ship a 'Weekly Recap' feature in days, not months.

Ready to get started? Explore the VideoFlow Documentation, try out the interactive Playground, or dive into the source code on GitHub.

VideoFlow is open-source (Apache-2.0) and built for developers who want to automate the visual world.