1---
2name: parameters
3description: Make a video parametrizable by adding a Zod schema
4metadata:
5  tags: parameters, zod, schema
6---
7 
8To make a video parametrizable, a Zod schema can be added to a composition.
9 
10First, `zod` must be installed .
11 
12Search the project for lockfiles and run the correct command depending on the package manager:
13 
14If `package-lock.json` is found, use the following command:
15 
16```bash
17npm i zod
18```
19 
20If `bun.lockb` is found, use the following command:
21 
22```bash
23bun i zod
24```
25 
26If `yarn.lock` is found, use the following command:
27 
28```bash
29yarn add zod
30```
31 
32If `pnpm-lock.yaml` is found, use the following command:
33 
34```bash
35pnpm i zod
36```
37 
38Then, a Zod schema can be defined alongside the component:
39 
40```tsx title="src/MyComposition.tsx"
41import { z } from "zod";
42 
43export const MyCompositionSchema = z.object({
44  title: z.string(),
45});
46 
47const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = () => {
48  return (
49    <div>
50      <h1>{props.title}</h1>
51    </div>
52  );
53};
54```
55 
56In the root file, the schema can be passed to the composition:
57 
58```tsx title="src/Root.tsx"
59import { Composition } from "remotion";
60import { MycComponent, MyCompositionSchema } from "./MyComposition";
61 
62export const RemotionRoot = () => {
63  return (
64    <Composition
65      id="MyComposition"
66      component={MyComponent}
67      durationInFrames={100}
68      fps={30}
69      width={1080}
70      height={1080}
71      defaultProps={{ title: "Hello World" }}
72      schema={MyCompositionSchema}
73    />
74  );
75};
76```
77 
78Now, the user can edit the parameter visually in the sidebar.
79 
80All schemas that are supported by Zod are supported by Remotion.
81 
82Remotion requires that the top-level type is a z.object(), because the collection of props of a React component is always an object.
83 
84## Color picker
85 
86For adding a color picker, use `zColor()` from `@remotion/zod-types`.
87 
88If it is not installed, use the following command:
89 
90```bash
91npx remotion add @remotion/zod-types # If project uses npm
92bunx remotion add @remotion/zod-types # If project uses bun
93yarn remotion add @remotion/zod-types # If project uses yarn
94pnpm exec remotion add @remotion/zod-types # If project uses pnpm
95```
96 
97Then import `zColor` from `@remotion/zod-types`:
98 
99```tsx
100import { zColor } from "@remotion/zod-types";
101```
102 
103Then use it in the schema:
104 
105```tsx
106export const MyCompositionSchema = z.object({
107  color: zColor(),
108});
109```
110