registerRenderAppElement

API reference for the registerRenderAppElement method.

Registers a callback that renders an app element when its data is created or updated. To learn how to set app element data, see Setting app element data.

Usage

import { getDesignInteraction } from "@canva/design-interaction";

const designInteraction = getDesignInteraction();

designInteraction.registerRenderAppElement((data) => {
  return [
    {
      type: "EMBED",
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      width: 400,
      height: 400,
      top: 0,
      left: 0,
    },
  ];
});

Parameters

#callbackfunction

Required

The callback function that runs when the app element data is created or updated. This function must return an array of elements, but can't contain group elements or video elements:

designInteraction.registerRenderAppElement((data) => {
  return [
    {
      type: "EMBED",
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      width: 400,
      height: 400,
      top: 0,
      left: 0,
    },
    {
      type: "EMBED",
      url: "https://www.youtube.com/watch?v=o-YBDTqX_ZU",
      width: 400,
      height: 400,
      top: 0,
      left: 400,
    },
  ];
});

All of the elements must have positional properties:

width
height
top
left

To learn more, see Combining elements.

#callback(data)object

Required

The app element data. The app should use this data to render the element.

Returns

void