Skip to main content

installInStudio()v4.0.502

Discovers a recently focused Remotion Studio and sends it an Element payload.

install-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.error(result.code, result.message);
} else {
  console.log(result.status); // "awaiting-confirmation"
}

Arguments​

payload​

The value returned by createElementPayload().

Return value​

Returns a promise with a discriminated union.

success​

Indicates whether the request reached the exact selected Studio tab and composition.

status​

On success, the value is "awaiting-confirmation". Studio is showing or queuing a confirmation dialog. No dependency or source-file installation is guaranteed yet.

target​

On success, contains the project name, composition ID, Studio origin, and Studio version.

code​

On failure, one of:

  • unsupported-origin
  • no-compatible-studio
  • studio-upgrade-required
  • no-installable-target
  • unsupported-protocol
  • invalid-response
  • target-expired
  • request-rejected
  • request-timed-out
  • network-error

message​

A human-readable failure message. Use code for application logic.

Discovery​

Ports 3000 through 3009 are probed in parallel. The most recently focused compatible target is selected. Discovery returns a short-lived, single-use token bound to that Studio tab and composition.

Studios older than 4.0.502 are detected and return studio-upgrade-required. The Element is not sent through the legacy endpoint.

Supported origins​

The function supports https://remotion.dev, https://www.remotion.dev, HTTP localhost, and HTTP 127.0.0.1.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​