packages/docs/docs/studio-protocol/index.mdx
A versioned protocol for providing content to Remotion Studio.
<Installation pkg="@remotion/studio-protocol" />A Remotion Element is a reusable React component distributed as source code, together with the metadata and dependencies needed to add it to a composition. Because its source code becomes part of the project, it can be edited and remixed by the user.
Websites can provide Remotion Elements by drag-and-drop or request their installation into the active composition.
<Step>1</Step> Create an Element payload with createElementPayload().
<Step>2</Step> Provide the payload to Studio: put it on a drag event with setStudioDragData(), or request installation into the active composition with installInStudio().
Offer both delivery methods when possible. They use the same Element payload but suit different workflows.
| Method | Benefits | Tradeoffs |
|---|---|---|
| Drag-and-drop | The user chooses the exact Studio tab, timeline position, and canvas position. | Drag data has no reliable website provenance, so Studio labels the source as unverified. |
| Installation request | The requesting website is shown in Studio. On macOS, Studio attempts to bring the target tab to the foreground. | Local Studio ports are probed and the most recently focused compatible Studio is selected automatically. |
import {TableOfContents} from './table-of-contents';
<TableOfContents />Learn about the confirmation and origin policy.