Automating Personalized Onboarding Videos with VideoFlow and TypeScript

First impressions are everything in SaaS. When a new user signs up, you have a narrow window to prove value, orient them within your UI, and build a connection. While a generic "Welcome" email is standard, it often goes ignored. Imagine instead sending a personalized onboarding video that greets the user by name, shows their specific company logo, and walks them through the exact features relevant to their industry—all generated automatically the second they hit "Sign Up."

Historically, this level of personalization was reserved for high-touch enterprise sales or companies with massive video engineering teams. But with VideoFlow, you can build a fully automated video factory using nothing but TypeScript and a few lines of JSON. In this post, we’ll explore how to treat video like data and ship personalized content at scale.

Why Personalized Video Matters for SaaS

Video is the most engaging medium we have, but it's notoriously difficult to automate. Most teams rely on fragile FFmpeg shell scripts or expensive third-party APIs that charge per minute of render time. This creates a bottleneck: you either settle for generic content or pay a premium for personalization.

By moving to a programmatic video model, you can treat your video assets exactly like your HTML templates. You define the structure once, and then inject user-specific data (names, avatars, metrics) at runtime. This approach reduces the cost of production to near-zero and allows for sub-second iteration on your video "code."

The Architecture of a Video Factory

To build a personalized onboarding pipeline, you need three components: a data source (your user DB), a template (VideoFlow code), and a renderer. Because VideoFlow compiles to a portable VideoJSON format, you can separate the authorship from the execution.

Here is how a typical flow looks:

1. Trigger: A user completes sign-up.
2. Hydration: Your backend fetches the user's name, avatar, and company logo.
3. Compilation: A TypeScript function uses the @videoflow/core builder to generate a personalized VideoJSON document.
4. Rendering: The JSON is sent to a renderer to produce an MP4.

Building the Dynamic Template

Let’s look at how easy it is to define a dynamic scene. Using the VideoFlow builder, we can create a high-quality intro that feels custom-made for every user.

import VideoFlow from '@videoflow/core';

export async function generateOnboardingVideo(userData: { name: string, avatarUrl: string }) {
  const $ = new VideoFlow({ width: 1920, height: 1080, fps: 30 });

  // 1. Add a background image with a subtle blur effect
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.4, filterBlur: '10px' },
    { source: 'https://assets.videoflow.dev/onboarding-bg.jpg' }
  );

  // 2. Add the user's avatar with a pop-in transition
  const avatar = $.addImage(
    { 
      width: 20, height: 20, 
      position: [0.5, 0.4], 
      borderRadius: '50%' 
    },
    { 
      source: userData.avatarUrl, 
      transitionIn: { transition: 'zoom', duration: '600ms' }
    }
  );

  $.wait('400ms');

  // 3. Greet the user by name
  const title = $.addText(
    {
      text: `Welcome, ${userData.name}!`,
      fontSize: 8,
      fontWeight: 800,
      color: '#FF5A1F', // VideoFlow Orange
      position: [0.5, 0.65],
    },
    { 
      transitionIn: { transition: 'slideUp', duration: '800ms' }
    }
  );

  $.wait('3s');
  
  // 4. Fade out everything
  title.fadeOut('500ms');
  avatar.fadeOut('500ms');
  bg.fadeOut('500ms');

  return $.compile();
}

In this example, we’ve used built-in transitions like zoom and slideUp to create a professional feel without writing a single line of CSS or keyframe logic. The $.wait() method handles the timing, ensuring the flow is easy to read and maintain.

Rendering at Scale: Browser vs. Server

One of the most powerful features of VideoFlow is the Official Renderers matrix. You aren't locked into a single infrastructure choice:

• Server-side Rendering: Use @videoflow/renderer-server in a Node.js environment to generate MP4s in the background. It uses headless Chromium to ensure that what you see in development is exactly what gets rendered, with no FFmpeg dependencies required by default.
• Browser-side Export: If you want to save on server costs, you can use @videoflow/renderer-browser to export the video directly in the user's browser tab using WebCodecs. This is perfect for "Download your video" features.
• Live Preview: While building your templates, the @videoflow/renderer-dom provides a frame-accurate, 60fps preview. You can even drop the React Video Editor into your internal tools to let your marketing team tweak the templates without touching code.

How VideoFlow Handles the Complexity

Building a video pipeline from scratch is a daunting task. You have to handle frame synchronization, font loading, asset pre-fetching, and codec quirks. VideoFlow abstracts all of this away:

1. Resolution Agnostic: By using em units (where 1em = 1% of width), your templates render identically at 720p, 1080p, or 4K.
2. Portable JSON: Since the output is just data, you can store your video "source" in a standard database like Postgres or version-control it in Git.
3. Cinematic Primitives: With 27 transitions and 42 GLSL effects (like bloom and vhsDistortion) built into the core, you can achieve an After Effects look with a developer-friendly API.

If you're coming from other tools, check out our Remotion alternatives guide or see how we compare in the VideoFlow vs. FFmpeg deep dive.

Get Started with Personalized Onboarding

Personalized onboarding videos don't have to be a "someday" project. With VideoFlow, you can prototype a template in minutes and scale it to thousands of users with ease.

Ready to build? Head over to the VideoFlow Playground to experiment with the builder in real-time, or dive into the Quick Start guide to install the core package. If you're building a SaaS product, don't forget to check out the GitHub repository to see the source and join our community of video-as-code engineers.