Skip navigation
Skip to main content
Canva Developers logo

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 side panel of the Canva editor. The app can then render content inside the iframe and interact with the editor via APIs.

Using the APIs

Canva injects APIs into the app's iframe. The app can then access these APIs via a number of methods. The TypeScript declarations for these methods are organized into a handful of npm packages.

The available packages include:

Apps can use any combination of these packages and their methods to implement the app's behavior.

To use a method, import it from a package and call it with the required parameters. For example, the following code sample demonstrates how to use the requestExport method from the @canva/design package:

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


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


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

You can find the complete list of methods and their parameters in the API reference section of the documentation.

Preview APIs

To ensure we're developing the best possible APIs, we want to get them in the hands of developers sooner rather than later. We do this by releasing preview versions of the APIs that anyone can play around with.

Canva exposes the preview versions of these APIs via a @canva/preview package. This package is only available via the starter kit. For the time being, this package is not available via the npm repository.

To use these APIs, import methods from the following sub-packages:

  • @canva/preview/asset
  • @canva/preview/design
  • @canva/preview/error
  • @canva/preview/platform
  • @canva/preview/user

These packages expose new methods and modified versions of existing methods. They're documented alongside the stable APIs, but we make sure to highlight anything that's only available as a preview.

If you're planning on using the preview APIs, be aware that:

  • Anything imported from the @canva/preview package may experience breaking changes at short notice. You should not rely on the methods remaining available or continuing to behave in the same way.
  • If an app depends on the @canva/preview package, it won't be approved for release during Canva's app review process. You'll have to wait for the API to be moved into one of the stable packages.

Technical limitations

Apps have a lot of freedom within their iframes, but not total freedom.

In particular, these are the technical limitations that developers struggle with:

  • The iframe has a Content Security Policy (CSP) that prevents certain resources, such as third-party scripts, from being loaded. To learn more, see Content Security Policy.
  • The iframe has a Permission Policy that prevents apps from accessing certain browser features. The only feature allowed by this policy is writing data to the user's clipboard.
  • If the app sends HTTP requests to a backend, the requests will fail unless the backend is configured to support Cross-Origin Resource Sharing (CORS). To learn more, see Using a backend and Cross-Origin Resource Sharing.
  • The app doesn't have free-for-all access to the underlying document model. This means it can't freely read and write changes to the design. It can only use Canva's APIs, which expose a limited subset of controls.