Defining a schema for your props - Remotion

As an alternative to using TypeScript types to define the shape of the props your component accepts, you may use Zod to define a schema for your props. You may do so if you want to edit the props visually in the Remotion Studio.

Prerequisites

If you want to use this feature, install zod and @remotion/zod-types for Remotion-specific types:

bash

npx remotion add @remotion/zod-types zod

Defining a schema

To define a schema for your props, use z.object():

tsx

import {z} from 'zod';

export const myCompSchema = z.object({
  propOne: z.string(),
  propTwo: z.string(),
});

Using z.infer(), you can turn the schema into a type:

tsx

import {z} from 'zod';

export const myCompSchema = z.object({
  propOne: z.string(),
  propTwo: z.string(),
});
// ---cut---
export const MyComp: React.FC<z.infer<typeof myCompSchema>> = ({propOne, propTwo}) => {
  return (
    <div>
      props: {propOne}, {propTwo}
    </div>
  );
};

Adding a schema to your composition

Use the schema prop to attach the schema to your <Composition>. Remotion will require you to specify matching defaultProps.

tsx

// @filename: MyComponent.tsx
import React from 'react';
import {z} from 'zod';

export const myCompSchema = z.object({
  propOne: z.string(),
  propTwo: z.string(),
});

export const MyComponent: React.FC<z.infer<typeof myCompSchema>> = ({propOne, propTwo}) => {
  return (
    <div>
      <h1>{propOne}</h1>
      <h2>{propTwo}</h2>
    </div>
  );
};

// @filename: Root.tsx
// organize-imports-ignore
// ---cut---
import React from 'react';
import {Composition} from 'remotion';
import {MyComponent, myCompSchema} from './MyComponent';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        propOne: 'Hello World',
        propTwo: 'Welcome to Remotion',
      }}
    />
  );
};

Editing props visually

When you have defined a schema for your props, you can edit them visually in the Remotion Studio. This is useful if you want to quickly try out different values for your props.

Supported types

All schemas that are supported by Zod are supported by Remotion.

Remotion requires that the top-level type is a z.object(), because the collection of props of a React component is always an object.

In addition to the built in types, the @remotion/zod-types package also provides types like zColor(), zTextarea() and zMatrix().