Skip to main content

z

v4.0.0

z is a re-export of the Zod library (version 3.21.4).

You may use it to define schemas for compositions in order to make the input props type-safe.

Example​

The following usage is recommended, since it will make defaultProps type-safe and them editable in the schema editor in the Remotion Preview:

MyComp.tsx
tsx
import { z } from "remotion";
 
export const myCompSchema = z.object({
  title: z.string(),
  subtitle: z.string(),
});
 
export const MyComp: React.FC<z.infer<typeof myCompSchema>> = ({
  title,
  subtitle,
}) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </div>
  );
};
MyComp.tsx
tsx
import { z } from "remotion";
 
export const myCompSchema = z.object({
  title: z.string(),
  subtitle: z.string(),
});
 
export const MyComp: React.FC<z.infer<typeof myCompSchema>> = ({
  title,
  subtitle,
}) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </div>
  );
};
Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComp, myCompSchema } from "./MyComp";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-comp"
      component={MyComp}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        title: "Hello World",
        subtitle: "Welcome to Remotion",
      }}
    />
  );
};
Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComp, myCompSchema } from "./MyComp";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-comp"
      component={MyComp}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        title: "Hello World",
        subtitle: "Welcome to Remotion",
      }}
    />
  );
};

See also​