Chapter 376: Integrating a component library with Studio

Core Idea

An Element contains the source code for one component. It also contains the data that Studio needs to insert the component.

Key Concepts

• Show a Player preview
• Reuse component code
• Vite
• Next.js
• Add install actions
• Test the integration
• See also

Code Examples

import LowerThirdElement, {
  lowerThirdElementDefinition,
} from './LowerThirdElement';

export const LowerThirdGalleryItem = () => {
  return (
    <>
      <Player
        component={LowerThirdElement}
        compositionWidth={lowerThirdElementDefinition.dimensions.width}
        compositionHeight={lowerThirdElementDefinition.dimensions.height}
        durationInFrames={lowerThirdElementDefinition.durationInFrames}
        fps={lowerThirdElementDefinition.fps}
      />
      <InstallActions
        definition={lowerThirdElementDefinition}
        sourceCode={lowerThirdSourceCode}
      />
    </>
  );
};

• What it demonstrates: Usage pattern for Integrating a component library with Studio from the official docs.

Key Takeaways

1. Understand show a player preview when working with Integrating a component library with Studio.
2. Understand reuse component code when working with Integrating a component library with Studio.
3. Understand vite when working with Integrating a component library with Studio.
4. Understand next.js when working with Integrating a component library with Studio.
5. Understand add install actions when working with Integrating a component library with Studio.

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.