Chapter 378: installInStudio()

Core Idea

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

Key Concepts

• Example
• When to use an installation request
• Arguments
• payload
• Return value
• success
• status
• target

Code Examples

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

const elementSourceCode = `
export const MyElement = () => {
  return <div>Hello world</div>;
};
`;

const payload = createElementPayload({
  displayName: 'My Element',
  slug: 'my-element',
  sourceCode: elementSourceCode,
  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"
}

• What it demonstrates: Usage pattern for installInStudio() from the official docs.

Key Takeaways

1. Understand example when working with installInStudio().
2. Understand when to use an installation request when working with installInStudio().
3. Understand arguments when working with installInStudio().
4. Understand payload when working with installInStudio().
5. Understand return value when working with installInStudio().

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.