Skip to main content

Interactivev4.0.475

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

Use it when a regular element should be selectable and draggable in the preview:

MyComp.tsx
import {AbsoluteFill, Interactive} from 'remotion';

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

Components​

The component name is the PascalCase version of the underlying element:

MyComp.tsx
import {Interactive} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Interactive.Svg viewBox="0 0 100 100" width={100} height={100}>
      <Interactive.Rect width={100} height={100} fill="blue" />
      <Interactive.Text x={50} y={50} textAnchor="middle" fill="white">
        Hi
      </Interactive.Text>
    </Interactive.Svg>
  );
};

Available HTML elements:

A, Article, Aside, Button, Code, Div, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Label, Li, Main, Nav, Ol, P, Pre, Section, Small, Span, Strong, Ul.

Available SVG elements:

Circle, Ellipse, G, Line, Path, Rect, Svg, Text.

Schema helpers​

Interactive also exposes schema fragments for custom timeline components.

Use them with Interactive.withSchema().

Interactive.baseSchemav4.0.479​

Controls inherited from <Sequence>:

durationInFrames, from, freeze, hidden, name and showInTimeline.

Use it for components that render a <Sequence> internally.

schema.ts
import {Interactive, type InteractivitySchema} from 'remotion';

export const shapeSchema = {
  ...Interactive.baseSchema,
  radius: {
    type: 'number',
    default: 80,
    description: 'Radius',
    hiddenFromList: false,
  },
} as const satisfies InteractivitySchema;

Interactive.transformSchemav4.0.479​

Controls for transform-related style props:

style.transformOrigin, style.translate, style.scale, style.rotate and style.opacity.

Use it for components that accept a style prop and apply it to the rendered element.

Interactive.premountSchemav4.0.479​

Controls for mounting behavior:

premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted.

Use it for components that forward these props to a <Sequence> with layout="absolute-fill".

Interactive.sequenceSchemav4.0.479​

The schema used by <Sequence>.

It includes Interactive.baseSchema and a layout field. When layout is "absolute-fill", the active fields include Interactive.transformSchema and Interactive.premountSchema.

Interactive.withSchema()v4.0.479​

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

See Interactive.withSchema().

Types​

InteractiveBasePropsv4.0.479​

The prop type matching Interactive.baseSchema.

InteractiveTransformPropsv4.0.479​

The prop type matching Interactive.transformSchema.

InteractivePremountPropsv4.0.479​

The prop type matching Interactive.premountSchema.

Props​

Inherited props​

Every Interactive component inherits durationInFrames, from, freeze, hidden, name and showInTimeline from <Sequence>.

Timed element
import {Interactive} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Interactive.Div from={30} durationInFrames={90}>
      Visible from frame 30 to 119
    </Interactive.Div>
  );
};

ref?​

You can add a React ref to the rendered element.

Using a ref
import {useRef} from 'react';
import {Interactive} from 'remotion';

export const MyComp: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);

  return <Interactive.Div ref={ref}>Hello World</Interactive.Div>;
};

Other props​

All props of the corresponding HTML or SVG element are forwarded.

For example, <Interactive.Div> accepts <div> props, and <Interactive.Svg> accepts <svg> props.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​