@remotion/zod-types-v3v4.0.426

@remotion/zod-types creates schemas using Zod v4 since Remotion v4.0.426.

This package is for if you are using Zod v3.22.3 and want to compose functions like zColor() with Zod v3.22.3 schemas.

Installation

Remotion CLI

npx remotion add @remotion/zod-types-v3

npm

npm i --save-exact @remotion/zod-types-v3@4.0.425

This assumes you are currently using v4.0.425 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

bun

pnpm i @remotion/zod-types-v3@4.0.425

This assumes you are currently using v4.0.425 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

pnpm

bun i @remotion/zod-types-v3@4.0.425

This assumes you are currently using v4.0.425 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

yarn

yarn --exact add @remotion/zod-types-v3@4.0.425

This assumes you are currently using v4.0.425 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

Usage

Using @remotion/zod-types-v3 with Zod v3
import {z} from 'zod'; // zod = 3.22.3
import {zColor} from '@remotion/zod-types-v3';

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

The package exports the same zColor(), zTextarea(), and zMatrix() functions as @remotion/zod-types, but they return Zod v3.22.3 schema types.

When to use

Use @remotion/zod-types with Zod v4:

import {z} from 'zod'; // zod = 4.x.x
import {zColor} from '@remotion/zod-types';

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

Use @remotion/zod-types if you are not nesting schemas:

import {zColor} from '@remotion/zod-types';
import {visualControl} from '@remotion/studio';

export const myVisualControl = visualControl('my-color', '#fff', zColor());

Use @remotion/zod-types-v3 with Zod v3.22.3:

import {z} from 'zod'; // zod = 3.22.3
import {zColor} from '@remotion/zod-types-v3';

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

Other Zod 3.x.x versions are not officially supported.

See also

• @remotion/zod-types