Chapter 358: Make a component interactive

Core Idea

Interactive components can be selected in the Remotion Studio timeline and can expose editable props.

Key Concepts

• Create a schema
• Caption fields<AvailableFrom v="4.0.500" />
• Forward controls
• Wrap the component
• Use the component
• Choosing schema fragments
• Interactive.baseSchema
• Interactive.transformSchema

Code Examples

import {
  Interactive,
  type InteractiveBaseProps,
  type InteractiveTransformProps,
  type InteractivitySchema,
} from 'remotion';

type BadgeProps = InteractiveBaseProps &
  InteractiveTransformProps & {
    readonly children?: React.ReactNode;
    readonly color?: string;
    readonly padding?: number;
  };

const badgeSchema = {
  ...Interactive.baseSchema,
  color: {
    type: 'color',
    default: '#0b84ff',
    description: 'Color',
  },
  padding: {
    type: 'number',
    min: 0,
    step: 1,
    default: 16,
    description: 'Padding',
    hiddenFromList: false,
  },
  ...Interactive.transformSchema,
} as const satisfies InteractivitySchema;

• What it demonstrates: Usage pattern for Make a component interactive from the official docs.

Key Takeaways

1. Understand create a schema when working with Make a component interactive.
2. Understand caption fields<availablefrom v="4.0.500" /> when working with Make a component interactive.
3. Understand forward controls when working with Make a component interactive.
4. Understand wrap the component when working with Make a component interactive.
5. Understand use the component when working with Make a component interactive.

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.