@remotion/studio-protocolv4.0.502

With this package, you can create payloads for passing content to Remotion Studio.

Remotion CLI

npx remotion add @remotion/studio-protocol

npm

npm i --save-exact @remotion/studio-protocol@4.0.539

This assumes you are currently using v4.0.539 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/studio-protocol@4.0.539

This assumes you are currently using v4.0.539 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/studio-protocol@4.0.539

This assumes you are currently using v4.0.539 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/studio-protocol@4.0.539

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

Websites can provide Elements to a Studio either using drag-and-drop or using an installation dialog.

1

Create an Element payload with createElementPayload().

2

Put it on a drag event with setStudioDragData(), or send a signal to a Studio using installInStudio().

Method	Benefits	Tradeoffs
Drag-and-drop	The user chooses the exact Studio tab, timeline position, and canvas position.	Studio labels the source as unverified.
Installation dialog	The requesting website is shown. Remotion attempts to bring the Studio to the foreground.	The most recently focused tab is selected, or the sole writable tab if none has been focused.

Adding an Element Library

Using addElementLibraryToStudio() you can request to add an Element Library to the Studio.

Previewing Elements

Using buildOpenInRemotionNewUrl(), you can open your Element in remotion.new.

APIs

createElementPayload()

Create a versioned Element payload

buildOpenInRemotionNewUrl()

Build a URL that opens an Element on remotion.new

setStudioDragData()

Put an Element payload on a drag event

installInStudio()

Request installation into the active Studio

addElementLibraryToStudio()

Add an Element Library to a Studio project

subscribeToCaptionStyleSelection()

Subscribe to your website’s selected caption style

isInsideStudio()

Check whether a library is embedded in Studio

Security

Learn about the confirmation and origin policy.

License

Remotion License

See also

• Building Element Libraries