Moving from Remotion to VideoFlow: The Complete Migration Guide

React is an incredible primitive for building interactive user interfaces, but is a component tree the right way to think about a linear video timeline? If you are building a programmatic video pipeline today, you are likely evaluating Remotion. But as your project scales, you might find yourself hitting friction: proprietary licensing costs, the overhead of a React runtime for simple JSON data, or the complexity of server-side rendering.

Enter VideoFlow. As a lightweight, Apache-2.0 alternative, VideoFlow swaps the declarative React tree for a portable VideoJSON schema and a fluent TypeScript builder. In this guide, we’ll walk through the architectural shift from Remotion to VideoFlow and show you how to migrate your existing logic without losing cinematic quality.

The Mental Shift: Components vs. Sequential Flow

In Remotion, you compose videos by nesting components inside a <Composition>. Timing is handled declaratively via <Sequence> wrappers. While familiar to React developers, this often leads to "wrapper hell" when coordinating dozens of staggered layers.

VideoFlow uses a sequential builder API. Instead of nesting components, you use a flow pointer. When you add a layer, the pointer stays at the start of that layer unless you explicitly tell it to move. This makes complex timing feel like writing a script rather than balancing a tree.

Mapping the Core Concepts

Step 1: Initializing the Project

In Remotion, you define a composition in a Root.tsx file. In VideoFlow, you simply instantiate the core builder. This can happen in a browser, a Node.js script, or even inside a serverless function.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({
  width: 1920,
  height: 1080,
  fps: 30,
  backgroundColor: '#0a0d18'
});

Unlike Remotion, which requires a heavy dev server to preview, you can take this instance and immediately see results in our interactive Playground.

Step 2: From Sequences to Sequential Logic

In Remotion, staggering three text elements looks like this:

<Sequence from={0} durationInFrames={30}>
  <Title text="One" />
</Sequence>
<Sequence from={15} durationInFrames={30}>
  <Title text="Two" />
</Sequence>

In VideoFlow, you use the $.parallel primitive to run independent branches of logic from the same starting point, or simply use $.wait to advance the global flow pointer:

// All layers start at the current pointer
const t1 = $.addText({ text: 'One', opacity: 0 });
$.wait('500ms');
const t2 = $.addText({ text: 'Two', opacity: 0 });

// Use built-in cinematic transitions verified in our core library
t1.fadeIn('300ms');
t2.fadeIn('300ms');

This approach eliminates the need to manually calculate from and durationInFrames for every single element. You can learn more about this in our guide to the builder API.

Step 3: Animation and Keyframes

Remotion relies heavily on the interpolate function inside the render loop. VideoFlow moves this logic to a declarative .animate() method on the layer instance. Every visual property—from position and scale to GLSL effects—is animatable.

const logo = $.addImage(
  { fit: 'contain', scale: 0.8 },
  { source: '/brand/logo.png' }
);

// Animate from scale 0.8 to 1.1 over 2 seconds
logo.animate(
  { scale: 0.8 },
  { scale: 1.1 },
  { duration: '2s', easing: 'easeOut' }
);

For more complex compositions, you can use Layer Groups to nest elements and animate them as a single unit, similar to how you would wrap multiple components in a single <Sequence>.

Step 4: The Rendering Pipeline

One of the biggest advantages of migrating to VideoFlow is the three official renderers. Remotion is primarily designed for server-side rendering via @remotion/lambda or local CLI.

VideoFlow’s @videoflow/renderer-browser allows you to export MP4s directly in the user's browser using WebCodecs. This removes the need for expensive GPU server clusters for many use cases. If you do need server-side rendering, @videoflow/renderer-server runs in Node.js and uses headless Chromium to produce byte-for-byte identical output to the browser renderer.

Why Make the Switch?

1. Apache-2.0 Licensing: VideoFlow's core and all renderers are truly open source. There are no proprietary licensing fees for organizations, unlike Remotion’s commercial license. You can verify this in our GitHub repository.
2. JSON Portability: Because VideoFlow compiles to a standard JSON schema, your video templates aren't locked into a React environment. You can store templates in a database, diff them in Git, or generate them from a Python backend.
3. Built-in Cinematic Primitives: VideoFlow ships with 27 transition presets (like blurResolve and glitchResolve) and 42 GLSL effects (like bloom and vhsDistortion) out of the box. In Remotion, you often have to build these from scratch using interpolate.

For a deeper dive into the technical differences, check out our dedicated VideoFlow vs. Remotion comparison.

Conclusion

Migrating from Remotion to VideoFlow is more than just a syntax change—it's a move toward a more portable, open, and efficient video-as-code architecture. Whether you are building an automated video pipeline or embedding a video editor into your SaaS, VideoFlow provides the primitives you need without the React tax.

Ready to see it in action? Head over to the VideoFlow Docs to get started, or try the Playground to build your first scene in seconds.