Chapter 189: Client-side rendering

Core Idea

Client-side rendering is a Remotion capability that allows you to render videos, images, and audio directly in the browser, without requiring server-side infrastructure.

Key Concepts

• Key differences from server-side rendering
• Browser support
• APIs
• Remotion Studio
• Telemetry
• See also

Code Examples

const Component: React.FC = () => {
  return (
    <svg viewBox="0 0 100 100" width="100" height="100" style={{transform: 'rotate(45deg)'}}>
      <polygon points="50,10 90,90 10,90" fill="orange" />
    </svg>
  );
};

const {getBlob} = await renderMediaOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 100,
    height: 100,
    calculateMetadata: null,
    id: 'my-composition',
  },
  inputProps: {},
});

• What it demonstrates: Usage pattern for Client-side rendering from the official docs.

Reference Tables

Browser	Minimum version
Chrome	94+
Firefox	130+
Safari	26+

Key Takeaways

1. Understand key differences from server-side rendering when working with Client-side rendering.
2. Understand browser support when working with Client-side rendering.
3. Understand apis when working with Client-side rendering.
4. Understand remotion studio when working with Client-side rendering.
5. Understand telemetry when working with Client-side rendering.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.