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.

Props​

Inherited props​

Every Interactive component inherits from, durationInFrames, name, showInTimeline and hidden 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​