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 <Img> and </IFrame> components!

Customizing Webpack configuration​

See docs

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:

remotion.config.ts

ts
import { overrideWebpackConfig } from "@remotion/bundler";
overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...currentConfiguration.module.rules,
        // Add more loaders here
      ],
    },
  };
});

ts
import { overrideWebpackConfig } from "@remotion/bundler";
overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...currentConfiguration.module.rules,
        // Add more loaders here
      ],
    },
  };
});

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.

New <Img /> and <IFrame /> components​

See docs

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.

Bonus: ESLint rule​

To prevent shooting yourself into your foot, Remotion now comes with an ESLint rule that warns if you use the native <img>, <iframe>, <video> or <audio> tags. These tags work better when you use the Remotion-wrapped versions instead.

Upgrading is easy​

Simply type

npm run upgrade

npm run upgrade

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.

I've been using After Effects for many years, but it's always been a dream of mine to code my videos instead. In the React ecosystem, I am used to being able to take advantage of powerful composition, reusability, to be able to customize the experience for every user. To use scripts, linters and external dependencies to make my life easier as a coder.

So as a proof of concept I tried to make a trailer for my AnySticker app¹ in React, and to render each frame using Puppeteer and stitch them together using FFMPEG.

The final result was a video that I thought was the best one I created yet. And I realized there was something to the idea.

This is my attempt to create a tool for the community that allows you to write videos in React. Obviously this is a huge undertaking, so this is not a product with hundreds of different features built in. Rather, following the React philosophy, this is an attempt to create a minimal fundament for rendering videos in React. Basically, you get a blank canvas, and you create your motion graphics using existing web technologies built into the browser and your favorite external libraries. Remotion is so minimal in fact, it consists of only 5-6 APIs that you need to learn to get started.

To get started is super easy. Assuming you already have Yarn, run:

bash
yarn create video

bash
yarn create video

and then read the documentation. Let me know on Twitter what you think!