Skip to main content

Remotion 4.0

· 3 min read
Jonny Burger

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 and getCompositionsOnLambda()
  • New articles

Player improvements

Load fonts dynamically

ES Module support

More @remotion/paths functions

Miscellaneous

  • getStaticFiles() API
  • <Experimental.Clipper>
  • <Experimental.Null>
  • style and ref 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 are arm64 only.