Skip to main content

Defining a schema for your props

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@3.22.3 and @remotion/zod-types for Remotion-specific types:

npm i --save-exact @remotion/zod-types@4.0.187 zod@3.22.3
npm i --save-exact @remotion/zod-types@4.0.187 zod@3.22.3
This assumes you are currently using v4.0.187 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

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(),
});
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
export const MyComp: React.FC<z.infer<typeof myCompSchema>> = ({
  propOne,
  propTwo,
}) => {
  return (
    <div>
      props: {propOne}, {propTwo}
    </div>
  );
};
tsx
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
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",
      }}
    />
  );
};
src/Root.tsx
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​

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 zColor(), including a color picker interface for the Remotion Studio.