Moving from Remotion to VideoFlow: The Complete Migration Playbook
August 22, 2026 · By VideoFlowThinking about switching from Remotion? This migration playbook covers mapping React concepts to VideoFlow's JSON-first architecture for programmatic video.
Moving from Remotion to VideoFlow: The Complete Migration Playbook
If you have spent any time in the video-as-code space, you have likely encountered Remotion. It is a powerful tool that brought React's component model to the world of video editing. But as video pipelines move from simple experiments to production-grade automation, many engineering teams are looking for a Remotion alternative that offers more flexibility, lower costs, and a cleaner separation between UI and data.
Moving to VideoFlow isn't just about switching libraries; it is about moving from a proprietary, React-locked architecture to an open-source, JSON-first workflow. This playbook will help you map your existing Remotion knowledge to VideoFlow's primitives.
Why Teams Are Making the Switch
While Remotion is great for React developers, it introduces significant overhead for automated pipelines. Because scenes are tied to a React runtime, you are forced to manage a complex state tree and component lifecycle just to output a video. VideoFlow simplifies this by treating videos as portable VideoJSON documents.
Key advantages include:
- Apache-2.0 Licensing: Unlike Remotion's proprietary core, the VideoFlow GitHub repo is fully open source.
- JSON Portability: Emit videos from any language (Python, Go, Node) and render them anywhere.
- Zero-Cost Browser Export: Use
@videoflow/renderer-browserto export MP4s directly in your user's tab via WebCodecs. - Built-in Cinematic Primitives: Stop building transitions from scratch with
interpolate(); use our 27 bundled presets instead.
Mapping the Mental Model
1. From <Sequence> to $.wait()
In Remotion, you manage timing by nesting <Sequence> components with from and duration props. This requires manual frame math to ensure layers don't overlap or gap unexpectedly.
In VideoFlow, the builder API uses a sequential flow pointer. When you add a layer, the pointer stays at the start time unless you tell it to move. This makes composition feel like writing a script rather than building a tree.
// Remotion style (Declarative Tree)
<Sequence from={0} duration={30}>
<Title />
</Sequence>
<Sequence from={30} duration={60}>
<Body />
</Sequence>
// VideoFlow style (Imperative Flow)
const title = $.addText({ text: 'Hello' });
$.wait('1s');
title.remove();
const body = $.addText({ text: 'World' });
$.wait('2s');
2. From interpolate() to .animate()
Remotion requires you to map frame to a value using the interpolate() helper. This is powerful but verbose for simple motion. VideoFlow handles the interpolation for you through the .animate() method and built-in transition specs.
// VideoFlow: Simple fade and slide
const card = $.addShape(
{ fill: '#FF5A1F', opacity: 0 },
{ shapeType: 'rectangle' }
);
card.animate({ opacity: 0 }, { opacity: 1 }, { duration: '500ms' });
The Three-Renderer Rule
One of the biggest shifts for Remotion users is the flexibility of the rendering pipeline. In our guide on The Three-Renderer Rule, we explore how VideoFlow splits the workload across three distinct environments:
- DOM Renderer: Frame-accurate, 60fps live preview for your UI.
- Browser Renderer: Zero-server-cost MP4 export using WebCodecs.
- Server Renderer: Headless Chromium rendering on Node.js (with no FFmpeg dependency required).
This means you can let your users preview and edit videos in the browser using the Playground, then render the final high-quality MP4 on your server—all using the exact same VideoJSON.
Migration Example: A Branded Intro
Let's look at how a standard branded intro translates to the VideoFlow core API.
import VideoFlow from '@videoflow/core';
const $ = new VideoFlow({ width: 1920, height: 1080 });
// 1. Add a background with a blur effect
const bg = $.addImage(
{ fit: 'cover', filterBlur: 0 },
{ source: 'https://assets.videoflow.dev/bg.jpg' }
);
// 2. Add a logo with a built-in transition
const logo = $.addImage(
{ position: [0.5, 0.4], scale: 0.8 },
{
source: 'https://assets.videoflow.dev/logo.png',
transitionIn: { transition: 'zoom', duration: '800ms' }
}
);
// 3. Animate the background blur in the background
bg.animate({ filterBlur: 0 }, { filterBlur: 10 }, { duration: '3s', wait: false });
$.wait('3s');
const json = await $.compile();
Conclusion: The Future is Portable
By migrating from Remotion to VideoFlow, you are future-proofing your video pipeline. You gain the ability to generate videos from any backend service, reduce your server costs to zero by leveraging client-side export, and enjoy the freedom of a truly open-source toolkit.
Ready to start your migration? Dive into the official documentation or explore the examples gallery to see what is possible when video becomes data.