Chapter 69: Defining a schema for your props

Core Idea

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

Key Concepts

• AI agent prompt
• Prerequisites
• Defining a schema
• Adding a schema to your composition
• Editing props visually
• Supported types

Code Examples

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.

• What it demonstrates: Usage pattern for Defining a schema for your props from the official docs.

Key Takeaways

1. Understand ai agent prompt when working with Defining a schema for your props.
2. Understand prerequisites when working with Defining a schema for your props.
3. Understand defining a schema when working with Defining a schema for your props.
4. Understand adding a schema to your composition when working with Defining a schema for your props.
5. Understand editing props visually when working with Defining a schema for your props.

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.