Moving from Remotion to VideoFlow: An Open-Source Migration Guide

If you've built a video-as-code pipeline in the last few years, you've likely used Remotion. It's a powerful tool that proved React is a viable engine for motion graphics. But as your project scales, you might hit two specific walls: the proprietary commercial license and the tight coupling to the React runtime.

Whether you're looking for a Remotion alternative to regain Apache-2.0 freedom or you need a way to render videos without a heavy React dependency, VideoFlow offers a clear path forward. In this guide, we'll walk through the architectural shift from JSX component trees to portable VideoJSON documents.

Why Migrate to VideoFlow?

While Remotion is excellent for React-centric teams, VideoFlow was built for a different set of constraints:

1. Apache-2.0 Freedom: The VideoFlow core and all official renderers are fully open-source. You can embed them in commercial SaaS products without tracking employee counts or paying for a license.
2. JSON Portability: In VideoFlow, your video is a data structure, not a component. This means you can generate VideoJSON in Python, store it in Postgres, and diff it in Git without ever touching a frontend framework.
3. In-Browser Export: Using @videoflow/renderer-browser, you can export high-quality MP4s directly in the user's tab via WebCodecs—no server cost required.

1. From JSX to the Fluent Builder

In Remotion, you define scenes as nested React components. In VideoFlow, you use a fluent TypeScript builder that compiles to a static VideoJSON document.

The Remotion Way:

<Sequence from={0} durationInFrames={60}>
  <Title text="Hello World" />
</Sequence>

The VideoFlow Way:

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow();

$.addText({
  text: 'Hello World',
  fontSize: 6,
  position: [0.5, 0.5]
});

$.wait('2s');
const json = await $.compile();

VideoFlow's builder API eliminates the need for manual frame math. Instead of calculating from={n}, you simply use $.wait() or $.parallel() to advance the timeline.

2. Timing and Sequences

One of the biggest shifts is how you handle flow. Remotion uses a declarative sequence model where every element's timing is relative to its parent. VideoFlow uses a procedural flow model that feels more like writing a script.

To run multiple animations at once without advancing the main timeline, you use $.parallel():

$.parallel(($) => {
  $.addImage({ opacity: 0.5 }, { source: 'bg.jpg' });
});

// This text appears *over* the image because the image didn't advance the flow
$.addText({ text: 'Overlay' });
$.wait('3s');

This makes parallel and wait patterns much more intuitive for developers coming from traditional imperative programming.

3. Headless Rendering without the Overhead

Remotion's server-side rendering is powerful but requires a heavy setup. VideoFlow's @videoflow/renderer-server uses a streamlined Playwright pipeline that renders inside headless Chromium.

Crucially, VideoFlow can render MP4s without ffmpeg installed by default, using WebCodecs and MediaBunny inside the browser instance. This makes it a perfect fit for serverless environments where installing system dependencies is a headache.

Making the Switch

Migrating doesn't mean starting from scratch. You can test your logic in the VideoFlow Playground today. Because VideoFlow is resolution-agnostic (using em units based on project width), the same code you write in the playground will render identically in 4K on your server.

If you are currently managing complex media pipelines, you might find our guide on diffable video versioning helpful for understanding how to treat your videos like production code.

Ready to dive in? Check out our Remotion vs VideoFlow comparison for a feature-by-feature breakdown, or jump straight into the getting started guide.

You can find the full source code and contribute to the community on GitHub.