Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup
metadata
tags: parameters, zod, schema

To make a video parametrizable, a Zod schema can be added to a composition.

First, install zod in the version that matches Remotion:

bash
npx remotion add zod # If project uses npmbunx remotion add zod # If project uses bunyarn remotion add zod # If project uses yarnpnpm exec remotion add zod # If project uses pnpm

Then, a Zod schema can be defined alongside the component:

tsx
import { z } from "zod";
export const MyCompositionSchema = z.object({  title: z.string(),});
export const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = (  props,) => {  return (    <div>      <h1>        {props.title}      </h1>    </div>  );};

In the root file, the schema can be passed to the composition:

tsx
import { Composition } from "remotion";import { MyComponent, 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.

Color picker

For adding a color picker, use zColor() from @remotion/zod-types.

If it is not installed, use the following command:

bash
npx remotion add @remotion/zod-types # If project uses npmbunx remotion add @remotion/zod-types # If project uses bunyarn remotion add @remotion/zod-types # If project uses yarnpnpm exec remotion add @remotion/zod-types # If project uses pnpm

Then import zColor from @remotion/zod-types:

tsx
import { zColor } from "@remotion/zod-types";

Then use it in the schema:

tsx
export const MyCompositionSchema = z.object({  color: zColor(),});