Skip to main content

Remotion 4.0

· 6 min read
Jonny Burger

Welcome to the biggest Remotion update ever!
With Remotion 4.0, we offer significant improvements to every workflow.



<a style={{ color: 'var(--text-color)', border: '3px solid var(--text-color)', display: 'block', padding: '10px 15px', borderRadius: 10, textDecoration: 'none', }} href="/4">

Discover the new features of Remotion 4.0 in a new video every day.

Introducing the Remotion Studio​

We added handy features to the Remotion Preview - as a result, it's more than just a preview! Therefore, we renamed it: Say hello to the Remotion Studio.

Interactive editing of props​

The props of a composition can now be defined as a Zod schema.
Doing this will not only make your defaultProps typesafe, but also allow you to edit them in the Remotion Studio.

Edit numbers, strings, arrays, objects, enums and dates directly using a graphical interface. Even nested data structures can be visualized and edited.

Once you are happy with the changes you've made, you can even save the props back to your project. This works with arbitrary JSON data.

Read more: Visual editing

Render Button​

Instead of typing in a CLI command, you can now simply press a button to render an asset.

A graphical interface allows you to discover and tweak all options of a render. You can follow the progress of a render in the Remotion Studio, queue multiple renders, and reveal the output in the file explorer.

Every render triggered through the UI is also trackable in the CLI as usual and synchronizes to other instances of the Remotion Studio.
Failed renders show the stack trace and allow for retries with the same configuration.

Edited props in the Remotion Studio can be used to render a video using the Render Button as well - which means you can now render a parameterized video by filling out a form and not having to touch any code.

Learn more on July 5th: Render Button

Rust-powered architecture​

Remotion 4.0 ships with a Rust binary that speeds up current and future features.

FFmpeg is baked in​

Installing FFmpeg is now superfluous, as each Remotion project comes with a tiny version of FFmpeg baked into it.

We eliminate the our burden of having to support multiple versions of FFmpeg, and you don't have to worry about installing it anymore.

We ship a custom build of FFmpeg 6.0, which is much smaller than a version that you would download. On Lambda, it decreases the cold start time of your functions.

We also get access to the low-level C API that allows us to do things that were not possible before.

Faster <OffthreadVideo>​

The <OffthreadVideo> component is the preferred way to embed an existing video into a Remotion project.

While previously, frames were extracted using the FFmpeg CLI, we now use the FFmpeg C API to extract frames. Because we can keep the video open between extractions, this is much faster than before

Unnecessary redundant decoding work can now be skipped, which makes the component up to twice as fast during rendering!

Support for WebP and PDF generation​

Previously you could generate PNGs and JPEGs using Remotion - now we support WebP and PDF as well!

There are plenty of ways you can render stills: the new Render button, the npx remotion still command, the renderStill() Node.JS API, render on Lambda with renderStillOnLambda() or on Google Cloud Run using renderStillOnCloudrun()!

Easier data-driven videos​

We are introducing a new calculateMetadata() API for the <Composition> component. It helps if you want to:

1 Adjust the duration or resolution based on the props of the React component
2 Perform data fetching before the video renders
3 Precalculate props before mounting the React component

To demonstrate the possibilities of the new API, we made a new section in the docs entirely dedicated to data-driven videos. See: Parameterized rendering.

Upgraded templates​

All of our templates have been upgraded to use Remotion 4.0. Many of them make use of the new features, for example the popular Text-to-speech template allows you to customize the text and voice, and the template will automatically adjust the duration of the video to match.

We also introduce two new templates: Text-to-speech (Google) which is an alternative to the Azure TTS template, as well as [https://www.remotion.dev/templates/stargazer] which is a popular template for celebrating GitHub star milestones and can now be initialized using npm init video.

More features​

These features added inbetween v3.3 and v4.0 are worth highlighting:

@remotion/rive package​

Rive is a faster and smaller alternative to Lottie.
With the new @remotion/rive package, you can include Rive animations in your project.

@remotion/shapes package​

@remotion/shapes is a handy package for including geometric shapes like <Triangle>, <Star> or <Pie> in your components!

Those components are easy to animate, pure, dependency-free and work well with @remotion/paths.

Each shape can be used as a React component <Star> or as a pure function that returns an SVG path makeStar().

@remotion/tailwind package​

The new Tailwind package allows you to install Tailwind more easily in any Remotion project.

Finetuned Audio codec​

Instead of the audio codec being tied to the video codec, you can now choose the audio codec independently.

Lambda improvements​

Player improvements​

ES Module support​

All APIs that can be imported in the browser now have an ES Module version.

Font Picker​

In your apps, you can now display a font picker and load fonts dynamically only when they are needed.

New Core APIs​

The remotion package has had the following improvements:

Join the Cloud Run Alpha​

As a counterpart for Lambda, we are developing a Google Cloud Run package.
The alpha is now available, help us test it by becoming an early adopter.

Full Changelog​

See the GitHub release to see the full changelog.

Breaking changes​

See the Migration Guide for a full list of breaking changes.