Integrating with Canva
How to create an app that hooks into the Canva editor.
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.