Chapter 65: InteractivitySchema

Core Idea

An InteractivitySchema describes controls that Remotion Studio can show in the timeline.

Key Concepts

• Example
• Reusable component schemas
• Interactive.baseSchema
• Interactive.captionsSchema<AvailableFrom v="4.0.500" />
• Interactive.transformSchema
• Interactive.cropSchema<AvailableFrom v="4.0.500" />
• Interactive.textSchema<AvailableFrom v="4.0.481" />
• Interactive.backgroundSchema<AvailableFrom v="4.0.497" />

Code Examples

export const titleCardSchema = {
  ...Interactive.baseSchema,
  ...Interactive.transformSchema,
  tint: {
    type: 'color',
    default: '#ffffff',
    description: 'Tint',
  },
} as const satisfies InteractivitySchema;

• What it demonstrates: Usage pattern for InteractivitySchema from the official docs.

Key Takeaways

1. Understand example when working with InteractivitySchema.
2. Understand reusable component schemas when working with InteractivitySchema.
3. Understand interactive.baseschema when working with InteractivitySchema.
4. Understand interactive.captionsschema<availablefrom v="4.0.500" /> when working with InteractivitySchema.
5. Understand interactive.transformschema when working with InteractivitySchema.

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.