Welcome to the biggest Remotion update ever!
With Remotion 4.0, we offer significant improvements to every workflow.
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
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
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.
<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
Easier data-driven videos
We are introducing a new
calculateMetadata() API for the
<Composition> component. It helps if you want to:
Perform data fetching before the video renders
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.
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.
These features added inbetween v3.3 and v4.0 are worth highlighting:
Those components are easy to animate, pure, dependency-free and work well with
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.
- Support for more regions has been added, 20 regions are now supported.
speculateFunctionName()API allows for faster launches of a render.
- VP9 videos are now supported.
npx remotion lambda compositionsand
getCompositionsOnLambda()APIs have now been added.
- New PHP and Go SDKs
- New examples for Serverless and SQS integration.
- The Player UI now has an optional Playback rate control.
- The Player now is marked as
"use client"to support import in React Server Components.
ES Module support
All APIs that can be imported in the browser now have an ES Module version.
In your apps, you can now display a font picker and load fonts dynamically only when they are needed.
New Core APIs
remotion package has had the following improvements:
getStaticFiles()allows you get get a list of files in the
cancelRender()allows you to abort a render should you run into an error.
- New Rust-accelerated components:
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.
See the GitHub release to see the full changelog.
See the Migration Guide for a full list of breaking changes.