Chapter 64: Interactive.withSchema()

Core Idea

Wraps a React component so Remotion Studio can expose its props as timeline controls.

Key Concepts

• Example
• API
• Component
• controls
• schema
• componentIdentity
• supportsEffects
• Return value

Code Examples

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

type CircleProps = InteractiveBaseProps &
  InteractiveTransformProps & {
  readonly radius?: number;
  readonly color?: string;
};

const circleSchema = {
  ...Interactive.baseSchema,
  radius: {
    type: 'number',
    min: 1,
    step: 1,
    default: 80,
    description: 'Radius',
    hiddenFromList: false,
  },
  color: {
    type: 'color',
    default: '#0b84ff',
    description: 'Color',
  },
  ...Interactive.transformSchema,
} as const satisfies InteractivitySchema;

const CircleInner = forwardRef<
  HTMLDivElement,
  CircleProps & {
    readonly controls: SequenceControls | undefined;
  }
>(
  (
    {
      radius = 80,
      color = '#0b84ff',
      name,
      style,
      controls,
      ...sequenceProps
    },
    ref,
  ) => {
    const outlineRef = useRef<HTMLDivElement>(null);

    useImperativeHandle(ref, () => outlineRef.current as HTMLDivElement, []);

    return (
      <Sequence
        layout="none"
        {...sequenceProps}
        name={name ?? '<Circle>'}
        controls={controls}
        outlineRef={outlineRef}
      >
        <div
          ref={outlineRef}
          style={{
            ...style,
            width: radius * 2,
            height: radius * 2,
            borderRa
// ...(truncated)

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

Key Takeaways

1. Understand example when working with Interactive.withSchema().
2. Understand api when working with Interactive.withSchema().
3. Understand component when working with Interactive.withSchema().
4. Understand controls when working with Interactive.withSchema().
5. Understand schema when working with Interactive.withSchema().

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.