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:

1
 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 />.
2
 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.
3
 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:

1
 The default props can be edited in the right sidebar. Invalid modifications will be marked with a red outline and do not apply.
2
 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:

1
 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.
2
 The passed input props may get transformed by calculateMetadata().