Remotion Turns Its React Video Framework Into a Drag-and-Drop Studio

Remotion, the React-based framework for building videos programmatically, just shipped a major quality-of-life upgrade: full visual interactivity in the Studio. You can now click elements on the canvas, drag them around, resize them, rotate them, and set keyframes, all while every change is automatically written back to your source code. No more manually tweaking pixel values and refreshing to see if they look right.

Code-first, but now with a canvas

Remotion's core philosophy has always been that a video is just a React component: a pure function that maps a frame number to a visual output. That's powerful for programmatic generation, but it made the authoring loop slow. You'd write a translateX value, save, preview, adjust, repeat. The new interactivity layer collapses that loop entirely.

The Studio now lets you click items in the canvas and drag them around, drag effects onto elements, drag videos, audio, and images directly onto the canvas, set keyframes for CSS, component props, and effect props, and drag layers in the timeline. Every manipulation is a codemod running under the hood, meaning your .tsx files stay as the source of truth.

The Interactive API

The Interactive namespace exposes HTML and SVG elements that can be visually edited in the Remotion Studio, making any regular element selectable and draggable in the preview. The pattern is a simple swap: replace a plain HTML tag with its Interactive counterpart.

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

The naming convention is straightforward: the component name is the PascalCase version of the underlying HTML or SVG element. <div> becomes <Interactive.Div>, <rect> becomes <Interactive.Rect>, and so on. All original props are forwarded transparently, so you don't lose any existing functionality.

What's interactive out of the box

You don't need to wrap everything manually. The following components are already interactive by default: Video, Audio, HtmlInCanvas, Sequence, Series, Img, AnimatedImage, Gif, RemotionRiveCanvas, and all @remotion/shapes components.

The full list of elements you can opt into manually covers most of what you'd need in a composition:

• HTML: Div, Span, P, H1–H6, Button, A, Ul, Ol, Li, Section, Article, Header, Footer, Nav, Main, Aside, Label, Code, Pre, Strong, Small, Em
• SVG: Svg, Rect, Circle, Ellipse, G, Line, Path, Text

Sequence props, inherited for free

Every Interactive component also inherits Sequence props like from, durationInFrames, name, showInTimeline, and hidden. That means you can time-gate an interactive element directly on the component without wrapping it in a separate <Sequence>.

<Interactive.Div from={30} durationInFrames={90}>
  Visible from frame 30 to 119
</Interactive.Div>

Setting showInTimeline={false} on any element removes it from the interactivity system entirely, which is useful for decorative layers you never want to accidentally select.

Opting out and staying clean

Not every project needs a fully interactive canvas. There's a new "Outline Toggle" in the Studio to hide all outlines, and setting showInTimeline={false} prevents an element from participating in interactivity at all. There's also a codemod available to disable interactivity across a project if you want to strip it out entirely.

The bigger picture

This release is part of a broader push by Remotion to close the gap between code-first video tools and traditional timeline editors. The same release also shipped keyframe easing controls with a visual easing editor, marquee selection in the timeline, arrow-key nudging for selected elements, and the ability to drag assets directly from the asset panel onto the canvas. Together, these features make the Studio feel much closer to a real design tool, without abandoning the React component model that makes Remotion uniquely powerful for programmatic video generation.

Remotion uses a whole DOM tree for the video rather than a single canvas element, which lets it render more types of content than canvas-only tools, but historically made visual editing harder to implement. The new interactivity layer solves that by tracking element positions through the DOM and writing changes back as code, bridging the gap between the browser's layout engine and the code editor.

The feature shipped in v4.0.475 and is available now via npm install remotion@latest. Remotion is free for individuals and open-source projects, with a company license required for commercial use.