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 {Interactive} from 'remotion';

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

For code that stays editable in the Studio, follow Interactivity best practices: Keep editable values inline, use hardcoded interpolate() keyframe arrays, use translate, scale, rotate and opacity directly, and avoid animated top/left values or transform strings.

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.

All SVG elements expose controls for the stroke and strokeWidth props. Elements with a paintable interior also expose a color control for fill. On Svg and G, these controls set inherited paint defaults for descendants. Keep these values inline in JSX if the Studio should edit or keyframe them. The strokeWidth control defaults to SVG's initial value of 1; resetting it removes the prop from the JSX. The stroke control defaults to none; resetting it also removes the prop and therefore removes the stroke.

Schema helpers​

Interactive also exposes reusable schema fragments for component controls.

Use them with Interactive.withSchema().

Interactive.baseSchemav4.0.479​

Controls inherited from <Sequence>:

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

Interactive.withSchema() includes this schema and uses it for its <Sequence>.

Interactive.transformSchemav4.0.479​

Controls for transform-related style props:

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

Interactive.withSchema() includes this schema. Keep these values inline in JSX if the Studio should edit or keyframe them.

Interactive.cropSchemav4.0.500​

Controls for cropping an element from each edge:

cropLeft, cropRight, cropTop and cropBottom.

Interactive.withSchema() includes this schema and applies the crop through the component's style prop.

Interactive.textSchemav4.0.481​

Controls for text-related style props:

style.color, style.fontFamily, style.fontSize, style.lineHeight, style.fontWeight, style.fontStyle, style.textAlign and style.letterSpacing.

style.fontFamily is available from v4.0.486.

Use it for components that accept a style prop and render text.

Interactive.backgroundSchemav4.0.497​

A color control for style.backgroundColor.

The backgroundColor longhand is used rather than the background shorthand so complex backgrounds such as gradients and images can remain untouched.

Use it for components that accept a style prop and render a CSS background.

Interactive.borderSchemav4.0.497​

Controls for border-related style props:

style.borderWidth, style.borderStyle and style.borderColor.

The longhand properties are used rather than the border shorthand, because React does not expand shorthands. This lets each control read its own value, and allows style.borderWidth and style.borderColor to be animated.

Use it for components that accept a style prop and render a border.

Interactive.borderRadiusSchemav4.0.501​

Controls for style.borderRadius and its four corner longhands: style.borderTopLeftRadius, style.borderTopRightRadius, style.borderBottomRightRadius and style.borderBottomLeftRadius.

The Studio shows either the shorthand or the four longhands. Mixing style.borderRadius with a corner longhand is treated as computed and cannot be edited visually.

When style.borderRadius is a number or contains one to four pixel values, the Studio expands it into the four longhand properties when you edit a corner. Complex values such as percentages and elliptical radii are not editable.

Use it for components that accept a style prop and render rounded corners.

Interactive.svgPaintSchemav4.0.499​

Controls for the SVG fill, stroke and strokeWidth props. The color prop is available from v4.0.507 and controls paint values that use currentColor.

Use it for custom components that accept SVG paint props.

Interactive.svgStrokeSchemav4.0.499​

Controls for the SVG stroke and strokeWidth props. The color prop is available from v4.0.507 and controls paint values that use currentColor.

Use it for custom components such as lines that do not have a paintable interior.

Interactive.premountSchemav4.0.479​

Controls for mounting behavior:

premountFor and postmountFor.

Interactive.withSchema() includes this schema and uses the props for its <Sequence>.

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 cropLeft, cropRight, cropTop, cropBottom, Interactive.transformSchema, Interactive.backgroundSchema, Interactive.borderSchema, Interactive.borderRadiusSchema 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 timing props accepted by interactive components. It includes the props in Interactive.baseSchema and loop.

InteractiveTransformPropsv4.0.479​

The prop type matching Interactive.transformSchema.

InteractiveCropPropsv4.0.500​

The prop type matching Interactive.cropSchema.

InteractivePremountPropsv4.0.479​

The prop type matching Interactive.premountSchema.

Props​

Inherited props​

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

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

Every Interactive component also supports cropLeft, cropRight, cropTop and cropBottom from v4.0.506.

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>
  );
};
Cropped element
import {Interactive} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Interactive.Div cropLeft={0.1} cropRight={0.2}>
      Cropped content
    </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​