Chapter 52: Inferring controls from default props

Core Idea

If a <Composition> has defaultProps but no schema, the Remotion Studio infers controls from the values in defaultProps.

Key Concepts

• Inference rules
• Values without an editable control
• When to define a schema
• See also

Code Examples

type Props = {
  title: string;
  color: string;
  showLogo: boolean;
};

const MyComponent: React.FC<Props> = () => null;

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        title: 'Hello',
        color: '#0b84ff',
        showLogo: true,
      }}
    />
  );
};

• What it demonstrates: Usage pattern for Inferring controls from default props from the official docs.

Reference Tables

Value in defaultProps	Inferred control
String	Text input
CSS color	Color picker
Value returned by staticFile()	Asset picker
Number	Number input
Boolean	Checkbox
Date	Date and time input
Plain object	Nested controls
Non-empty array	Array editor, if every item matches the type inferred from the first item

Key Takeaways

1. Understand inference rules when working with Inferring controls from default props.
2. Understand values without an editable control when working with Inferring controls from default props.
3. Understand when to define a schema when working with Inferring controls from default props.
4. Understand see also when working with Inferring controls from default props.

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.