Exporting designs

The Export capability lets an app export the user's design from Canva and publish it on a third-party platform — for example, a social media network or file storage service.

This guide explains how to export a design.

Step 1: Initialize the Export capability

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

console.log(window.canva.export);

You can access the capability by importing and calling the getExport function:

import { getExport } from "@canva/preview/export";
const api = getExport();
console.log(api); // => Export

This function:

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

Step 2: Call the queueDocument method

The Export capability exposes a queueDocument method:

await api.queueDocument({
  acceptedFileTypes: ["JPG", "PNG"],
});

This method opens a dialog that allows the user to configure how they want to export their design — for example, the format of the exported file.

The method accepts an object as its only parameter. This object must define an array of accepted file types. For the time being, this array must contain at least two file types. (This is a bug and will be fixed in the near future.)

The supported file types include:

• "GIF"
• "JPG"
• "PDF_STANDARD"
• "PNG"
• "PPTX"
• "SVG"
• "VIDEO"

The accepted file types are shown to the user in a select input and the design will be exported as the selected file type.

Step 3: Handle the result

When the user clicks the Export button, Canva adds the export to a queue.

When the export completes, the queueDocument returns an array of objects. Each of these objects contains a url property that points to a static file:

const result = await api.queueDocument({
  acceptedFileTypes: ["JPG", "PNG"],
});

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

What the app does with the URL is at the discretion of the app. That said, the URL expires after 60 minutes and is secured with a Content Security Policy, so the app should download the exported design via its backend rather than using the URL directly.

To learn how to send the URL to the app's backend, see Sending HTTP requests.

Handling multi-page designs

If the user's design contains multiple pages but is exported in a format that doesn't support multiple pages, the URL will point to a ZIP file that contains each page as a separate file.

For example:

• If a single-page design is exported as a JPG, the URL will point to a JPG file
• If a multi-page design is exported as a JPG, the URL will point to a ZIP file that contains a separate JPG file for each page
• If a multi-page design is exported as a PDF, the URL will point to a PDF file that contains all of the pages

The following file types support multiple pages:

• "GIF"
• "PDF_STANDARD"
• "PPTX"
• "VIDEO"

The following file types do not support multiple pages:

• "JPG"
• "PNG"
• "SVG"

If a user selects the "VIDEO" option, they have the choice of exporting each page as a separate file. In this case, the URL will point to a ZIP file that contains a separate video for each page.