Remotion Studio Protocolv4.0.502

A versioned protocol for providing content to Remotion Studio.

Remotion CLI

npx remotion add @remotion/studio-protocol

npm

npm i --save-exact @remotion/[email protected]

This assumes you are currently using v4.0.522 of Remotion.
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.

bun

pnpm i @remotion/[email protected]

This assumes you are currently using v4.0.522 of Remotion.
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.

pnpm

bun i @remotion/[email protected]

This assumes you are currently using v4.0.522 of Remotion.
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.

yarn

yarn --exact add @remotion/[email protected]

This assumes you are currently using v4.0.522 of Remotion.
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.

1

Create an Element payload with createElementPayload().

2

Provide the payload to Studio: put it on a drag event with setStudioDragData(), or request installation into the active composition with installInStudio().

If you publish reusable components, see Integrating a component library with Studio for recommendations on Player previews, representing components as Elements, and both delivery methods.

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.

Adding Element catalogs

A website can use addElementLibraryToStudio() to request that its catalog is persisted in a Remotion project's config. Studio shows the requesting origin and catalog URL before changing remotion.config.ts.

Adding a catalog does not install Element source code or dependencies. Each Element installation keeps its own confirmation.

APIs

createElementPayload()

Create a versioned Element payload

setStudioDragData()

Put an Element payload on a drag event

installInStudio()

Request installation into the active Studio

addElementLibraryToStudio()

Add an Element catalog to a Studio project

isInsideStudio()

Check whether a library is embedded in Studio

Security

Learn about the confirmation and origin policy.

License

Remotion License