Chapter 192: HTML-in-canvas

Core Idea

:::note This is not the same as the <HtmlInCanvas> component for designing visuals. This page describes a @remotion/web-renderer option that uses HTML-in-canvas to capture full frames during client-side rendering.

Key Concepts

• Enabling
• In code
• In the Studio
• As the Studio default
• Check if HTML-in-canvas was used
• Compatibility
• See also

Code Examples

declare const composition: Parameters<typeof renderStillOnWeb>[0]['composition'];

await renderStillOnWeb({
  composition,
  frame: 0,
  inputProps: {},
  allowHtmlInCanvas: true,
});

• What it demonstrates: Usage pattern for HTML-in-canvas from the official docs.

Key Takeaways

1. Understand enabling when working with HTML-in-canvas.
2. Understand in code when working with HTML-in-canvas.
3. Understand in the studio when working with HTML-in-canvas.
4. Understand as the studio default when working with HTML-in-canvas.
5. Understand check if html-in-canvas was used when working with HTML-in-canvas.

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.