Remotion Studio Protocolv4.0.502
A versioned protocol for providing content to Remotion Studio.
- Remotion CLI
- npm
- bun
- pnpm
- yarn
npx remotion add @remotion/studio-protocol
This assumes you are currently using v4.0.514 of Remotion.npm i --save-exact @remotion/studio-protocol@4.0.514
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.514 of Remotion.pnpm i @remotion/studio-protocol@4.0.514
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.514 of Remotion.bun i @remotion/studio-protocol@4.0.514
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.514 of Remotion.yarn --exact add @remotion/studio-protocol@4.0.514
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.Capabilities
Installing Remotion Elements
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.
Create an Element payload withcreateElementPayload().2
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. |
APIs
createElementPayload()
Create a versioned Element payload
setStudioDragData()
Put an Element payload on a drag event
installInStudio()
Request installation into the active Studio
Security
Learn about the confirmation and origin policy.