Defining a schema for your props

Use Zod to validate the props your component accepts and to customize their controls in the Remotion Studio.

You do not need to define a schema to edit props visually. Since v4.0.516, Remotion infers basic controls from defaultProps. See When to define a schema for cases where an explicit schema is useful.

AI agent prompt

Use this prompt to make an existing composition parameterizable:

Make this Remotion composition parameterizable in Remotion Studio.

Find the component that is passed to <Composition> and the file where the composition is registered.
Define a TypeScript type that describes the props the component accepts.
Add defaultProps to the <Composition> that match the type and preserve the current rendered output.
Keep defaultProps as an inline object literal so Remotion can infer visual controls and save changes back to the file.

If zod is missing, install it with npx remotion add zod.
Only add a Zod schema when the props need validation, constraints, choices, descriptions or specialized controls.
Keep the existing composition behavior unchanged except for making the props editable in Remotion Studio.

Prerequisites

To define a schema, install zod:

npx remotion add zod

Install @remotion/zod-types as well if you want to use Remotion-specific types such as zColor(), zTextarea() or zMatrix().

Defining a schema

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

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:

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.

src/Root.tsx
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

The schema determines which controls appear when you edit props visually in the Remotion Studio. It overrides the controls that Remotion would otherwise infer from defaultProps.

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().