Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.72
remotion-markup/parameters.mdMarkdown2 KBView on GitHub
To make a video parametrizable, a Zod schema can be added to a composition.
First, zod must be installed .
Search the project for lockfiles and run the correct command depending on the package manager:
If package-lock.json is found, use the following command:
npm i zodIf bun.lockb is found, use the following command:
bun i zodIf yarn.lock is found, use the following command:
yarn add zodIf pnpm-lock.yaml is found, use the following command:
pnpm i zodThen, a Zod schema can be defined alongside the component:
import { z } from "zod";
export const MyCompositionSchema = z.object({
title: z.string(),
});
const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = () => {
return (
<div>
<h1>
{props.title}
</h1>
</div>
);
};In the root file, the schema can be passed to the composition:
import { Composition } from "remotion";
import { MycComponent, MyCompositionSchema } from "./MyComposition";
export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComponent}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
defaultProps={{ title: "Hello World" }}
schema={MyCompositionSchema}
/>
);
};Now, the user can edit the parameter visually in the sidebar.
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.
For adding a color picker, use zColor() from @remotion/zod-types.
If it is not installed, use the following command:
npx remotion add @remotion/zod-types # If project uses npm
bunx remotion add @remotion/zod-types # If project uses bun
yarn remotion add @remotion/zod-types # If project uses yarn
pnpm exec remotion add @remotion/zod-types # If project uses pnpmThen import zColor from @remotion/zod-types:
import { zColor } from "@remotion/zod-types";Then use it in the schema:
export const MyCompositionSchema = z.object({
color: zColor(),
});