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()
.