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