How props get resolved

import {HowPropsFlow} from '../components/HowPropsFlow';

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