Chapter 384: Edit default props visually

Core Idea

<YouTube minutes={6} href="https://www. youtube.

Key Concepts

• Opening the default props editor
• Editing default props
• Supported controls
• Inferred from defaultProps<AvailableFrom v="4.0.516" />
• Defined by a schema
• Editing JSON
• Saving default props to your code
• Rendering videos from your input

Code Examples

// @filename: MyComponent.tsx

type Props = {
  propOne: string;
  propTwo: string;
};

export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>
      <h1>{propOne}</h1>
      <h2>{propTwo}</h2>
    </div>
  );
};

// @filename: Root.tsx
// organize-imports-ignore

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        propOne: 'Hello World',
        propTwo: 'Welcome to Remotion',
      }}
    />
  );
};

• What it demonstrates: Usage pattern for Edit default props visually from the official docs.

Key Takeaways

1. Understand opening the default props editor when working with Edit default props visually.
2. Understand editing default props when working with Edit default props visually.
3. Understand supported controls when working with Edit default props visually.
4. Understand inferred from defaultprops<availablefrom v="4.0.516" /> when working with Edit default props visually.
5. Understand defined by a schema when working with Edit default props visually.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.