Creating native elements

A native element is type of element that, from Canva's perspective, is indistinguishable from an element created via Canva itself. It's the simplest type of element to create and offers the most familiar user experience.

This page explains how to create native elements.

Step 1: Initialize the Design Interaction capability

Like all capabilities, Canva injects the Design Interaction capability into the app's iframe and attaches it to the window object:

console.log(window.canva.designInteraction);

To access the capability, import and call the getDesignInteraction function:

import { getDesignInteraction } from "@canva/design-interaction";
const designInteraction = getDesignInteraction();
console.log(designInteraction); // => DesignInteraction

This function:

• Throws an error if the capability is unavailable
• Provides type-safety when using TypeScript

Step 2: Call the addNativeElement method

The Design Interaction capability exposes an addNativeElement method that adds a native element to a user's design. You can call this method at any point in the lifecycle of an app, such as when a user clicks a button.

The addNativeElement method accepts an object with:

• The type of element that should be added to the design
• Additional properties specific to each type of element

Apps can add the following types of elements to a design:

designInteraction.addNativeElement({
  type: "EMBED",
  url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
});

What properties are available?

You can learn what properties are available for each type of element by using the IntelliSense that's built into modern text editors, such as Visual Studio Code.

You can also explore the TypeScript declarations exposed by the @canva/design-interaction package.

Troubleshooting errors

If invalid properties are passed into the addNativeElement method, an error is thrown and an element won't be added to the user's design. You can view the error in the JavaScript Console.