Welcome to the new release notes of one of the biggest Remotion updates ever! With Remotion 4.0, we offer significant improvements to many workflows.
Render button
Instead of quitting the Remotion Preview and rendering using a CLI command, you can now simply press a button to render a video, audio or still!
A graphical interface allows you to discover and tweak all options of a render. You may follow the progress of a render in the Remotion Preview, queue multiple renders, and open the resulting render 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 Preview. Failed renders show the stacktrace and allow for retries with the same configuration.
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
type-safe, but also allow you to edit the props live in the Remotion Preview.
Our visual schema editor supports editing numbers, strings, arrays, objects, enums and dates! Alternatively, you can also edit the JSON directly. Like the changes you've made? In a lot of cases, you can save the props back to your project!
Rust-powered FFmpeg
Installing FFmpeg is now superfluous, as each Remotion project comes with a tiny version of FFmpeg baked into it. This also enables us to use the low-level FFmpeg API from Rust! While it is currenly not being used, this will allow us to optimize the Remotion rendering pipeline going forward.
Support for WebP and PDF rendering
In addition to PNG and JPEG, you can now render a React component to WebP or PDF format. To do so, use the new render button, the npx remotion still
command, the renderStill()
Node.JS API, or render on Lambda with renderStillOnLambda()
!
Rive support
With the new @remotion/rive
package, you can include Rive animations in your project! Rive is a faster and smaller alternative to Lottie.
@remotion/shapes
package
Remotion Shapes is the easiest way to include geometric shapes like <Triangle>
, <Star>
or <Pie>
in your components! Those components are easy to animate, pure, and it's also possible to just get an SVG path for further manipulation.
Finetuned Audio codec
Lambda improvements
- More regions
speculateFunctionName()
- VP9 support
npx remotion lambda compositions
andgetCompositionsOnLambda()
- New articles
Player improvements
Load fonts dynamically
ES Module support
More @remotion/paths
functions
Miscellaneous
getStaticFiles()
API<Experimental.Clipper>
<Experimental.Null>
style
andref
in<Series.Sequence>
and<Loop>
New documentation
- Lambda documentation
- Docker
Breaking changes
In order to modernize our stack and fix some of our mistakes, we're making the following breaking changes:
- Node.JS 16 is now the minimum Node version.
- We removed the "Rich timeline" feature due to performance problems and confusing behavior created by mounting the component multiple times.
- We're dropping support for Lambda
x86_64
architecture. Now all Lambdas arearm64
only.