Remotion Studio Protocolv4.0.502

A versioned protocol for connecting websites to 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
npm
bun
pnpm
yarn

npx remotion add @remotion/studio-protocol

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

This assumes you are currently using v4.0.504 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 i @remotion/studio-protocol@4.0.504

bun i @remotion/studio-protocol@4.0.504

yarn --exact add @remotion/studio-protocol@4.0.504

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"
}