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

npm i --save-exact @remotion/zod-types@4.0.143 zod
npm i --save-exact @remotion/zod-types@4.0.143 zod
This assumes you are currently using v4.0.143 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.