Embed elements

What are embed elements? How do I create them?

An embed element is a type of element that renders rich, embeddable media from a third-party platform, such as a YouTube video or an Instagram photo.

Apps can use the Design Interaction capability to add embed elements to a user's design.

Supported media sources

Under the hood, Canva uses Iframely to embed media from third-party platforms. This means apps can embed any media that is supported by the Iframely API.

To check if a URL is supported, see What URLs to send to Iframely.

Creating embed elements

There are two ways to add an embed element to a design:

  • As a native element
  • As part of an app element

The following snippet demonstrates how to add an embed element to a design as a native element:

import React from "react";
import { getDesignInteraction } from "@canva/design-interaction";
export const App = () => {
const designInteraction = getDesignInteraction();
const handleClick = () => {
type: "EMBED",
url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
return (
<button onClick={handleClick}>Add embed element</button>

To learn more, see Creating native elements.


  • Iframely can't embed arbitrary HTML files. It can only embed media supported by its API.
  • If the original media is deleted, an error is displayed in place of the media.
  • If the original media changes, the changes are not immediately reflected in the user's design.
  • Users can't apply effects to embeds.