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
- yarn
- pnpm
bash
npm i zod @remotion/zod-types
bash
npm i zod @remotion/zod-types
bash
yarn add zod @remotion/zod-types
bash
yarn add zod @remotion/zod-types
bash
pnpm i zod @remotion/zod-types
bash
pnpm i zod @remotion/zod-types
Defining a schema
To define a schema for your props, use z.object()
:
tsx
import {z } from "zod";export constmyCompSchema =z .object ({propOne :z .string (),propTwo :z .string (),});
tsx
import {z } from "zod";export constmyCompSchema =z .object ({propOne :z .string (),propTwo :z .string (),});
Using z.infer()
, you can turn the schema into a type:
tsx
export constMyComp :React .FC <z .infer <typeofmyCompSchema >> = ({propOne ,propTwo ,}) => {return (<div >props: {propOne }, {propTwo }</div >);};
tsx
export constMyComp :React .FC <z .infer <typeofmyCompSchema >> = ({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.tsxtsx
importReact from "react";import {Composition } from "remotion";import {MyComponent ,myCompSchema } from "./MyComponent";export constRemotionRoot :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.tsxtsx
importReact from "react";import {Composition } from "remotion";import {MyComponent ,myCompSchema } from "./MyComponent";export constRemotionRoot :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.