Skip to main content

Interactive.withSchema()v4.0.530

Wraps a React component so Remotion Studio shows it as interactive.

Circle.tsx
import type React from 'react';
import {Interactive, type InteractivitySchema} from 'remotion';

type CircleProps = {
  readonly radius?: number;
  readonly color?: string;
  readonly style?: React.CSSProperties;
};

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

const CircleInner: React.FC<CircleProps> = ({radius = 80, color = '#0b84ff', style}) => {
  return (
    <div
      style={{
        ...style,
        width: radius * 2,
        height: radius * 2,
        borderRadius: '50%',
        backgroundColor: color,
      }}
    />
  );
};

export const Circle = Interactive.withSchema({
  Component: CircleInner,
  componentName: 'Circle',
  schema: circleSchema,
  wrapInSequence: true,
});

The exported Circle component accepts CircleProps, timing props, premount props and cropping props.

API​

import {Interactive} from 'remotion';

The options for Interactive.withSchema() are:

Component​

The component to wrap.

With the default layout: 'none', it must accept a style?: React.CSSProperties prop and apply it to its visual root. With layout: 'absolute-fill', the wrapper applies styles to a full-size container instead. Component must not declare style, width, or height props; these belong to the wrapper.

componentName​

The component name used by Studio and in validation messages.

schema​

An InteractivitySchema that describes which props are editable in Remotion Studio. Basic schemas like timing, premounting, cropping, and transforms are included by default and don't need to be specified

See: Make a component interactive

wrapInSequencev4.0.530​

Wraps the component in a <Sequence> automatically. Set this to true, unless you already have components from previous examples which handle wrapping in a <Sequence> manually. If set to false, you need to manually forward all props.

layout?v4.0.535​

Requires wrapInSequence: true. Defaults to 'none', which forwards styles to Component without adding a container.

Set to 'absolute-fill' to give the component a full-size, absolutely positioned container with overflow: 'hidden' by default. Set style={{overflow: 'visible'}} on the returned component to let content extend beyond its bounds. Styles, transforms, cropping, and premount styles apply to this container. It shares the component's timeline item, so no extra layout layer appears in Studio. The returned component also accepts width and height to size the container and set the dimensions reported by useVideoConfig().

The inner component can return a fragment and does not need to forward styles:

Scene.tsx
import React from 'react';
import {Video} from '@remotion/media';
import {Interactive, useVideoConfig} from 'remotion';

const SceneInner: React.FC = () => {
  const {fps} = useVideoConfig();

  return (
    <>
      <Video
        src="https://remotion.media/jonnys-videos/roller-skis-new/footage/IMG_0466.mp4"
        premountFor={fps}
        objectFit="cover"
        style={{width: '100%', height: '100%'}}
      />
      <Interactive.Div
        name="Title"
        style={{position: 'absolute', left: 80, bottom: 80, color: 'white', fontSize: 80}}
      >
        Under the trees
      </Interactive.Div>
    </>
  );
};

export const Scene = Interactive.withSchema({
  Component: SceneInner,
  componentName: 'Scene',
  schema: {},
  wrapInSequence: true,
  layout: 'absolute-fill',
});

const Example = () => (
  <Scene from={30} durationInFrames={90} premountFor={30} style={{opacity: 0.5}} />
);

Keep 'none' when styles need to apply directly to an element with its own size or layout, such as a text box, SVG, or button.

Return value​

Returns a React component.

Ref forwardingv4.0.530​

With layout: 'none', if Component accepts a ref, the returned component preserves its ref type and forwards the ref directly to Component.

With layout: 'absolute-fill', the ref points to the wrapper's HTMLDivElement.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

Rendering support depends on Component. Editing timeline controls requires an editable Remotion Studio session.

See also​