@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/[email protected]

This assumes you are currently using v4.0.529 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.529 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.529 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.529 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.	Always the most recently focused Studio is taken.

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.dev/new.

APIs

createElementPayload()

Create a versioned Element payload

buildOpenInRemotionNewUrl()

Build a URL that opens an Element on remotion.dev/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

isInsideStudio()

Check whether a library is embedded in Studio

Security

Learn about the confirmation and origin policy.

License

Remotion License

See also

• Integrating an Element Library with Studio