Integrating with Canva

At its most basic, an app is a JavaScript file that runs inside an iframe. Canva embeds this iframe in the object panel of the Canva editor. The app can then choose what to render in the iframe.

To allow apps to communicate with Canva (and vice-versa), Canva injects APIs into the iframe at runtime. You can use these APIs by importing methods from the following Node.js packages:

• @canva/asset
• @canva/preview/data
• @canva/design
• @canva/user

For example, the @canva/design package exposes a requestExport method that exports the user's design as one or more static files. This is how an app can use the method:

import { requestExport } from "@canva/design";

(async () => {
  const response = await requestExport({
    acceptedFileTypes: ["PNG", "JPG"],
  });

  console.log(response); // { exportBlobs: [{ url: "https://example.com/image.png" }] }
})();

You can find the complete list of methods in the sidebar, via the API reference section.