Skip to main content

Edit default props visually

Also available as a 6min video
Visual editing

You can edit the defaultProps of a <Composition> visually in the Remotion Studio.

Basic controls are inferred from the values in defaultProps. You do not need to define a schema.

Opening the default props editor​

To open the default 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 default props​

Use the controls in the props editor to live-update the default 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.

When editing a <Sequence> visually in the timeline, the visual style controls include offset, scale, rotation, transform origin, and opacity. Select the transform origin row or one of its keyframes to drag the pivot handle in the canvas.

Supported controls​

Inferred from defaultPropsv4.0.516​

If no schema is specified, Remotion infers controls from defaultProps. See Inferring controls from default props for the supported values and edge cases.

Defined by a schema​

See When to define a schema for cases where an explicit Zod schema is useful. An explicit schema takes precedence over the controls inferred from defaultProps.

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)
  • zTextarea() (from @remotion/zod-types)
  • zMatrix() (from @remotion/zod-types)
  • staticFile() assets by typing as z.string() and using staticFile() in your code
  • .min()
  • .max()
  • .step()

Editing JSON​

Alternatively, you can edit the props as JSON by pressing JSON in the props editor. Changes will not apply if the props are invalid.

Saving default 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
import React from 'react';
import {Composition} from 'remotion';
import {MyComponent} from './MyComponent';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      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.

Changing input props visually​

In the Props editor, you can only edit the default props visually. You then have the chance to override them using the calculateMetadata() function.
In the Render dialog, you have the chance to change the input props.__ They can also be overridden using calculateMetadata().