Skip to main content

How props get resolved

During rendering

Remotion performs an algorithm for determining the props that are being passed to your component when rendering the video. Three factors play a role:

Default props is the fallback data if no props are passed to the render. You can specify them using the defaultProps property of your <Composition />.
Input props is the data being passed while invoking a render, either via the inputProps option, the --props flag or using the render dialog in the Remotion Studio.
calculateMetadata() may be used to dynamically transform the props, as well as the metadata of the composition.

The following diagram shows how the props get resolved:

In the Remotion Studio

In the Remotion Studio, the props are resolved in a similar way, but with a few differences:

The default props can be edited in the right sidebar. Invalid modifications will be marked with a red outline and do not apply.
If you render a video using the Render button, the input props form gets pre-propagated with the default props, including modifications in the right sidebar.

The following rules stay the same, which you should be aware of:

If you start the Studio with the --props flag, this data will take priority over the default props, including modifications in the sidebar. It is not recommended to pass input props to the Studio.
The passed input props may get transformed by calculateMetadata().