Remotion Studio Protocolv4.0.502

A versioned protocol for bringing reusable content into Remotion Studio.

Protocol v1 supports Remotion Elements from the official Remotion Elements library. It provides one Element payload that can be delivered by dragging it into Studio or by requesting installation into the active composition.

Remotion CLI

npx remotion add @remotion/studio-protocol

npm

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

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

Usage

element.ts
import {
  createElementPayload,
  installInStudio,
} from '@remotion/studio-protocol';

const payload = createElementPayload({
  displayName: 'Lower Third',
  slug: 'lower-third',
  sourceCode: 'export const LowerThird = () => null;',
  dependencies: [],
  dimensions: {width: 900, height: 260},
  durationInFrames: 90,
});

const result = await installInStudio({payload});
if (result.success) {
  console.log(result.status); // "awaiting-confirmation"
}

A successful request means Studio received the Element and is awaiting confirmation. It does not mean dependencies or source files were installed.

APIs

createElementPayload()

Create a versioned Element payload

setStudioDragData()

Put an Element payload on a drag event

installInStudio()

Request installation into the active Studio

Protocol reference

Wire format, capabilities, and versioning

Security

Confirmation and origin policy

Supported origins

Install requests are accepted from:

• https://remotion.dev
• https://www.remotion.dev
• HTTP localhost
• HTTP 127.0.0.1

Protocol v1 is supported by the official Remotion Elements library. Other hosted websites are not currently authorized to send installation requests.

Compatibility

Remotion Studio 4.0.502 or newer is required. Browser Studio is not supported in protocol v1.

License

Remotion License