A guide to Remotion Studio

Video editing can be difficult, especially if you want to add things like animations or overlays. Remotion makes the process of creating videos and adding effects easier by allowing you to do this programmatically. Remotion provides a framework with React that lets you compose videos to include things like titles, sound, overlaid components, and more.

With the release of Remotion 4.0, using Remotion is even easier with Remotion Studio. Version 4.0 made several upgrades to Remotion, including the embedding of FFmpeg for generating videos right from your local host, and composition props with a Zod schema.

In this post, I’m going to walkthrough how to use Remotion Studio and include a few examples of things you can do. If you’d like to follow along, please check out my sample project on GitHub.

Jump ahead:

• Getting started with Remotion
• Creating composition props with Zod
• Dynamically changing background images
• Rendering FFmpeg with Remotion

Getting started with Remotion

Before diving into the details of Remotion Studio, it helps to understand some of the basics of Remotion.

If you’d like to create a project with Remotion, it is as simple as opening a terminal and running npm init video. After this, you will be prompted to select one of Remotion’s templates to get started:

Once you have your project created, it follows a structure similar to a React project:

There is a src folder that will hold your components and a public folder where you can save assets like images or even video files to put into your project. There is also an index.ts file in the src directory, which will be your entry point.

The root file will have your first Composition, which is basically a composed set of images or video that remotion will render. Note the component prop, which will be a React component that you write and pass in:

You will use AbsoluteFill elements in the React component that you write, which are basically divs for Remotion to render; Remotion has several built-in elements like sequence, series, and more:

To create a composition, you basically fill out your custom React component and then can generate things like animations, which you can run by just running npm run start from your terminal at the project root to open up Remotion Studio:

Immediately, you’ll notice the Compositions that you created in the root file on the left. On the right, you’ll also notice the props you designed with Zod. If you edit the props on the right, you’ll be able to see updates in real time.

Finally, when you’re ready to generate a video from your project, you can click the Renders tab on the right to generate an MP4 file. This is all built into Remotion and will output the file without you needing to install FFmpeg or any other tooling directly.

See the output in your terminal below:

Note that the image below is an additional popup that lets you pick specifics about your output file:

Creating composition props with Zod

Composition props are powerful because you can directly edit the properties locally and generate a preview of your content in real time. In the sample project that I referenced in the intro, I have four compositions that I created:

1. HelloWorld (copied from a starter project, shows text and an image)
2. OnlyLogo (copied from a starter project, which has a React logo whose color can be changed)
3. StaticValues (demonstrates Zod properties you can add to your compositions)
4. HarveyPicture (shows how to bring in an asset image and dynamically change it with Zod)

Zod compositions work by first defining a schema. In the StaticValues composition, I have a corresponding StaticValues component. If you open the file at src/compositions/StaticValues.tsx, you’ll see I first define a Zod schema at the top:

export const staticValueSchema = z.object({
  fontColor: zColor(),
  numberValue: z.number(),
  arrayValue: z.array(z.string()),
  enumValue: z.enum(['1.jpg', '2.jpg', '3.jpg', '4.jpg']),
  dateValue: z.date(),
});

You’ll next notice that I reference that schema in my component definition and then assign alias values to the properties, like prop1, prop2, etc.:

export const StaticValues: React.FC<z.infer<typeof staticValueSchema>> = ({
  fontColor: prop1,
  numberValue: prop2,
  arrayValue: prop3,
  enumValue: prop4,
  dateValue: prop5,
}) => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 60);
  return (
    <AbsoluteFill
      style={{

In the actual render function of the component, I have some basic styling and display the properties:

  return (
    <AbsoluteFill
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        fontSize: 80,
        color: prop1,
      }}
    >
      <div style={{opacity: opacity, padding: '20px', border: 'solid'}}>
        Hello World!
      </div>
      <div style={{opacity: opacity, padding: '20px', border: 'solid'}}>
        Prop Number: {prop2}
      </div>
      <div style={{opacity: opacity, padding: '20px', border: 'solid'}}>
        array: {prop3 && prop3.map((value) => <div>{value}</div>)}
      </div>
      <div style={{opacity: opacity, padding: '20px', border: 'solid'}}>
        enumValue: {prop4}
      </div>
      <div style={{opacity: opacity, padding: '20px', border: 'solid'}}>
        dateValue: {prop5.toLocaleDateString()}
      </div>
    </AbsoluteFill>
  );

I connect this back to the root file in the project and pass in default values for the props:

      <Composition
        id="StaticValues"
        component={StaticValues}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={staticValueSchema}
        defaultProps={{
          fontColor: '#0c0d0d',
          numberValue: 4,
          arrayValue: ['one', 'two', 'three'],
          enumValue: '4.jpg' as const,
          dateValue: new Date('2023-09-15T18:09:01.793Z'),
        }}
      />

With the local server running, I can now set these values and watch them change in real time:

This is quite powerful, as you can specify everything from just static strings to actual enums. This makes your video generation process very intuitive.

Dynamically changing background images

The StaticValues component I created above showcases how you can use a Zod schema to create props and edit them on the fly. A more realistic example would be to have a background image that you could dynamically change.

In the HarveyPicture composition, I basically have a title and a background image of my dog, Harvey. If you run your local server, you’ll see the video with the title and a brief animation of the image rotating:

The imageName prop is actually an enum! I defined that schema in the src/compositions/HarveyPicture.tsx as follows:

export const harveyPictureSchema = z.object({
  titleText: z.string(),
  titleColor: zColor(),
  imageName: z.enum(['1.jpg', '2.jpg', '3.jpg', '4.jpg']),
});

The image files are all located in the public folder of my project:

So, now, I can dynamically change this background picture for a video I create. This example is very simple, but with some more code you could create a set of these or at least change the background to any sequence of animations you want.

Rendering FFmpeg with Remotion

As I stated in the intro, Remotion 4.0 included FFmpeg in the build. This is very powerful because you can generate a video file directly through your local project. In previous builds of Remotion, you would have to take output assets and use FFMpeg to generate a file separately. In the latest version, the studio allows you to generate the video directly.

Back to my Harvey example — if I click Render video, I am shown a popup that has the props I defined, as well as several other options that I can set for my video:

Once I’ve made my selections, clicking Render video will render the video, and I can check my local terminal for the progress:

Wrapping up

Remotion Studio is a powerful tool that makes it easy to create videos with code. In this post, I only touched the surface of what you can do with Remotion Studio. Check our previous posts for more in-depth discussions of what you can do with Remotion more generally.

Their docs also contain many more features and examples you can work with. The templates make it easy to get started, and then within a short period of time you usually can figure out how to accomplish the effect you need for your project.

I hope this post has helped you get started, and hope you get a chance to check out Remotion Studio!

Are you adding new JS libraries to build new features or improve performance? What if they’re doing the opposite?

There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.

LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.

Build confidently — start monitoring for free.