Edit props visually

Also available as a 6min video

Visual editing

To edit props visually, first register a schema with your <Composition>.

Opening the props editor

To open the props editor, press the icon in the top right corner of the Remotion Studio to open the right sidebar. Alternatively, press Cmd/Ctrl + J to toggle the sidebar. Select the Props tab.

Editing props

Use the controls in the props editor to live-update the props of your composition. If you have changes, an undo ↩️ button will appear which you can use to revert to your changes in the code.

Supported controls

Controls are implemented for:

• z.object()
• z.string()
• z.date()
• z.number()
• z.boolean()
• z.array()
• z.union() (only unions of two types, one of them being z.null() or z.undefined())
• z.optional()
• z.nullable()
• z.enum()
• zColor() (from @remotion/zod-types)
• staticFile() assets by typing as z.string() and using staticFile() in your code
• .default()

Editing JSON

Alternatively, you can edit the JSON schema directly by pressing JSON in the props editor. Changes will not apply if the schema is invalid.

Saving props to your code

Remotion can statically analyze your root file and allow you to save props back to the code via the 💾 button. For this to work, your default props must be inlined into your <Composition>:

Inlined defaultProps
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent, myCompSchema } from "./MyComponent";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        propOne: "Hello World",
        propTwo: "Welcome to Remotion",
      }}
    />
  );
};

Inlined defaultProps
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent, myCompSchema } from "./MyComponent";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        propOne: "Hello World",
        propTwo: "Welcome to Remotion",
      }}
    />
  );
};

Rendering videos from your input

If you would like to render a video based on your input in the controls, then you don't need to save the props back to the code. Use the Render button to open a render dialog where your modified default props are filled in as input props.