Skip to main content

v4.0 Migration

When upgrading from Remotion 3 to Remotion 4, note the following changes and apply them to your project.

How to upgrade​

See the changelog to find the latest version. Upgrade remotion and all packages starting with @remotion to the latest version, e.g. 4.0.0:

diff
- "remotion": "^3.3.43"
- "@remotion/bundler": "^3.3.43"
- "@remotion/eslint-config": "^3.3.43"
- "@remotion/eslint-plugin": "^3.3.43"
- "@remotion/cli": "^3.3.43"
- "@remotion/renderer": "^3.3.43"
+ "remotion": "4.0.0"
+ "@remotion/bundler": "4.0.0"
+ "@remotion/eslint-config": "4.0.0"
+ "@remotion/eslint-plugin": "4.0.0"
+ "@remotion/cli": "4.0.0"
+ "@remotion/renderer": "4.0.0"
diff
- "remotion": "^3.3.43"
- "@remotion/bundler": "^3.3.43"
- "@remotion/eslint-config": "^3.3.43"
- "@remotion/eslint-plugin": "^3.3.43"
- "@remotion/cli": "^3.3.43"
- "@remotion/renderer": "^3.3.43"
+ "remotion": "4.0.0"
+ "@remotion/bundler": "4.0.0"
+ "@remotion/eslint-config": "4.0.0"
+ "@remotion/eslint-plugin": "4.0.0"
+ "@remotion/cli": "4.0.0"
+ "@remotion/renderer": "4.0.0"

Run npm i , yarn or pnpm i respectively afterwards.

Config file changes​

The CLI configuration file has been moved out from the core Remotion package to @remotion/cli/config. Update your imports like this:

diff
- import {Config} from 'remotion';
+ import {Config} from '@remotion/cli/config';
diff
- import {Config} from 'remotion';
+ import {Config} from '@remotion/cli/config';

TODO: Old config syntax has been removed

Dropped support for Lambda architecture​

When deploying a Lambda, you were previously able to choose between the arm64 and x86_64 architecture.
From v4.0 on, only arm64 is supported. It should be faster, cheaper and not have any different behavior than x86_64.

How to upgrade:

  • Remove the architecture option from estimatePrice() and deployFunction().

Rich timeline removed​

The option to use the "Rich timeline" has been removed due to performance problems.
The timeline is now always in simple mode, but supports more timeline layers at once.

ProRes videos now export uncompressed audio by default​

Previously, the aac audio codec was the default for ProRes exports. The default is now pcm_s16le which stands for uncompressed 16-bit low-endian PCM audio.
This change was made since users export ProRes mainly for getting high-quality footage to be further used in video editing programs.

Renamed quality option to jpegQuality​

To clarify the meaning of this option, it is now universally called "JPEG Quality". Adjust the following options:

No more FFmpeg install, ffmpegExecutable option removed​

FFmpeg is now baked into the @remotion/renderer package. Therefore, the ffmpegExecutable and ffprobeExecutable options have been removed.

How to upgrade:

Moved onSlowestFrames API​

In V3, onSlowestFrames has been a callback function that you could pass to renderMedia().
In V4, this data has been moved to the return value.

Separating ImageFormat​

Previously, the imageFormat option would be used for both stills and videos. While for stills, PNG is often preferrable, for videos it is overall faster to use JPEG as a default. In Remotion 4.0, the image formats are being separated so you can set defaults for videos and stills separately.

  • Config.setImageFormat got replaced by Config.setVideoImageFormat() and Config.setStillImageFormat().
  • The CLI option is still --image-format for all commands.
  • The Node.JS API name is still imageFormat.
  • The TypeScript type ImageFormat has been separated into StillImageFormat and VideoImageFormat.
  • StillImageFormat now also supports webp and pdf!

ImageFormat removed​

The @remotion/renderer ImageFormat Type got replaced by the more specific Types VideoImageFormat and StillImageFormat.

Removal of deprecated APIs​

  • Config.setOutputFormat() was deprecated in v1.4 and has now been removed. Use setImageSequence(), setVideoImageFormat() and setCodec() in combination instead.

  • downloadVideo() alias has been removed, use downloadMedia() with the same API instead.

  • <MotionBlur> has been removed. Use <Trail> instead.

  • getParts() has been removed. Use getSubpaths() instead:

paths.ts
tsx
import {
  getLength,
  getPointAtLength,
  getSubpaths,
  getTangentAtLength,
} from "@remotion/paths";
 
const path = "M 0 0 L 100 100";
const parts = getSubpaths(path[0]);
const length = getLength(parts[0]);
const start = getPointAtLength(parts[0], 0);
const end = getPointAtLength(parts[0], length);
const tangent = getTangentAtLength(parts[0], length / 2);
paths.ts
tsx
import {
  getLength,
  getPointAtLength,
  getSubpaths,
  getTangentAtLength,
} from "@remotion/paths";
 
const path = "M 0 0 L 100 100";
const parts = getSubpaths(path[0]);
const length = getLength(parts[0]);
const start = getPointAtLength(parts[0], 0);
const end = getPointAtLength(parts[0], length);
const tangent = getTangentAtLength(parts[0], length / 2);
  • webpackBundle has been removed from renderFrames() and renderMedia() - rename it to serveUrl instead
  • parallelism has been removed from renderFrames() and renderMedia() - rename it to concurrency instead.
  • config has been removed from renderFrames() - rename it to composition instead.

onBucketEnsured option has been removed​

The onBucketEnsured() option of getOrCreateBucket() has been removed because creating the bucket is the only operation of getOrCreateBucket(). Therefore, you can just await the function itself.

<Img> will cancel the render if the image cannot be loaded​

Before, <Img> would only log to the console if an image cannot be loaded and inevitably lead to a timeout if the error is not handled.

If this happens now and the error is not handled, the render will be aborted and the error reported.