Chapter 339: Code sharing

Core Idea

If you are using the player, a common desire is to share the code with your Remotion Studio and/or server-side rendering. With the correct setup, you can write the component once and use it for previewing, displaying and rendering.

Key Concepts

• Template
• Manual setup
• Using the Remotion Studio
• Adding <Player /> to your app
• Creating a bundle for server-side rendering
• See also

Code Examples

npm i remotion @remotion/cli @remotion/player

• What it demonstrates: Usage pattern for Code sharing from the official docs.

Key Takeaways

1. Understand template when working with Code sharing.
2. Understand manual setup when working with Code sharing.
3. Understand using the remotion studio when working with Code sharing.
4. Understand adding <player /> to your app when working with Code sharing.
5. Understand creating a bundle for server-side rendering when working with Code sharing.

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.