Chapter 377: createElementPayload()

Core Idea

Creates a validated, versioned Element payload for setStudioDragData() and installInStudio().

Key Concepts

• Example
• Arguments
• displayName
• slug
• sourceCode
• dependencies
• dimensions
• durationInFrames

Code Examples

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

const payload = createElementPayload({
  displayName: 'My Element',
  slug: 'my-element',
  sourceCode: elementSourceCode,
  dependencies: [
    {name: '@remotion/google-fonts', version: null},
    {name: 'color-namer', version: '1.4.0'},
  ],
  dimensions: {width: 900, height: 260},
  durationInFrames: 90,
});

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

Key Takeaways

1. Understand example when working with createElementPayload().
2. Understand arguments when working with createElementPayload().
3. Understand displayname when working with createElementPayload().
4. Understand slug when working with createElementPayload().
5. Understand sourcecode when working with createElementPayload().

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.