Remotion Studio Protocolv4.0.502

A versioned protocol for connecting websites to Remotion Studio.

Protocol v1 supports delivering Remotion Elements and setting a public Company License key from trusted origins.

Remotion CLI

npx remotion add @remotion/studio-protocol

npm

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

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

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

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

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

setLicenseKeyInStudio()

Set a public license key in a Studio project

Security

Confirmation and origin policy

Supported origins

Any HTTPS website can request an Element installation confirmation. HTTP is supported on localhost and 127.0.0.1 for local development.

setLicenseKeyInStudio() immediately changes a project config and therefore uses a stricter allowlist: remotion.pro, www.remotion.pro, and loopback development origins.

Compatibility

Remotion Studio 4.0.502 or newer is required for Element installation. setLicenseKeyInStudio() requires Remotion 4.0.504 or newer. Browser Studio is not supported in protocol v1.

License

Remotion License