Edit props visually
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 beingz.null()
orz.undefined()
)z.optional()
z.nullable()
z.enum()
zColor()
(from@remotion/zod-types
)staticFile()
assets by typing asz.string()
and usingstaticFile()
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 defaultPropstsx
importReact from "react";import {Composition } from "remotion";import {MyComponent ,myCompSchema } from "./MyComponent";export constRemotionRoot :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 defaultPropstsx
importReact from "react";import {Composition } from "remotion";import {MyComponent ,myCompSchema } from "./MyComponent";export constRemotionRoot :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.