How to Generate Videos with React and Remotion

You may have already seen the article where I explain how to "generate a pdf in NodeJS from a web application", but today we're stepping it up a notch by generating a video directly from a React application!

Remotion

Remotion is a library based on React that allows you to create videos from Javascript code, including scene management, animations and even a viewer built directly into the browser.

Creating a new Remotion project is very simple, you just need to open your command prompt and type:

npm init video

You'll then have a sample Remotion project available, with animations and several sequences to discover how the library works.

I invite you to read the official documentation alongside creating your project, especially for questions related to FFMPEG.

Example

While the example provided by Remotion is very comprehensive, I wanted to offer you the most minimal possible version of a sequence so you can see what can be done with very little code:

import {Sequence, useCurrentFrame, useVideoConfig} from 'remotion';
export const HelloWorld: React.FC<{}> = () => {
  const frame = useCurrentFrame();
  const videoConfig = useVideoConfig();
  const str = 'console.log("Hello World.");'.substr(0,Math.round(frame/3));
  return (
    <Sequence
      from={0} 
      durationInFrames={videoConfig.durationInFrames}
    >
      <div style={{
        display: "flex", 
        flex: 1, 
        flexDirection: "column", 
        backgroundColor: 'white', 
        alignItems: "center", 
        justifyContent: "center", 
        textAlign: "center"
      }}>
      <p style={{fontSize: 60}}>{str}</p>
    </div>
    </Sequence>
  );
};

The purpose of the sequence above is solely to display text letter by letter right in the middle of the screen (one letter every three frames) using the "useCurrentFrame()" hook provided by Remotion, around which all sequences are built.

Result

Since the code is very simple, the rendered video is just as simple. Once your sequence works, you can export it using the command:

npm run build

And here's the result!

While the rendering is truly minimalistic, the feat of managing to harness the power of the DOM and the HTML/CSS rendering engine is really impressive and offers interesting prospects for the long run!

Source code

You can find all the source code for the example directly on GitHub at: https://github.com/NicolasBrondin/basic-react-video

And I especially invite you to check out the official website for more information: