What an extraordinary launch! In less than 24 hours, the Remotion announcement video has gotten more than 100'000 views on Twitter. The feedback was absolutely overwhelming!
Now it's time to iterate and make Remotion better. This release contains two new features: Customizing the Webpack configuration and new
People had wild ideas on what to do with Remotion like importing MDX files or using React Native components. Now it is possible!
When providing the possibility on how to configure Remotion, it was of big importance to provide both a high degree of flexibility and a good developer experience. This is how you update the webpack config:
There is a new Remotion config file, that you can write in Typescript. Updating the Webpack config uses the reducer pattern: You get the default configuration and it is your responsibility to return an updated Webpack config. You get type checking, auto completion and the flexibility to either only update a single property or pass in a completely new configuration. No black magic here - since this is just a pure function, the outcome will be very predictable.
<Img /> and
<IFrame /> components#
The purpose of these new components is to help with something that is easy to overlook in Remotion: Images or Iframes are being rendered, but Remotion does not wait until the loading of these network resources are complete. The result: Flicker in the end result! The correct thing is to wait using the
delayRender API, but this is not very obvious. Now Remotion comes with built-in components that will wait until assets are loaded.
To prevent shooting yourself into your foot, Remotion now comes with an ESLint rule that warns if you use the native
<audio> tags. These tags work better when you use the Remotion-wrapped versions instead.
in your project and you'll get all the newest Remotion packages! Maybe you also noticed that there is a banner in the editor that notifies you when an upgrade is available.