Chapter 63: Interactive

Core Idea

Interactive exposes HTML and SVG elements that can be visually edited in the Remotion Studio.

Key Concepts

• Components
• Schema helpers
• Interactive.baseSchema<AvailableFrom v="4.0.479" />
• Interactive.transformSchema<AvailableFrom v="4.0.479" />
• Interactive.cropSchema<AvailableFrom v="4.0.500" />
• Interactive.textSchema<AvailableFrom v="4.0.481" />
• Interactive.backgroundSchema<AvailableFrom v="4.0.497" />
• Interactive.borderSchema<AvailableFrom v="4.0.497" />

Code Examples

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Interactive.Div style={{backgroundColor: 'white', padding: 24}}>Hello World</Interactive.Div>
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand components when working with Interactive.
2. Understand schema helpers when working with Interactive.
3. Understand interactive.baseschema<availablefrom v="4.0.479" /> when working with Interactive.
4. Understand interactive.transformschema<availablefrom v="4.0.479" /> when working with Interactive.
5. Understand interactive.cropschema<availablefrom v="4.0.500" /> when working with Interactive.

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.