Exporting designs

When Canva's users are ready to share their designs with the world, they can export them in a variety of formats, such as images, videos, and PDF documents.

Apps can also trigger the export of a user's design and then access the URLs of the exported files. This unlocks a range of possibilities for integrating apps with third-party platforms.

At any point in its lifecycle, an app can open an export dialog. In this dialog, the user can customize the settings of the export, such as the file format and resolution.

If a design has more than one page, the user can choose to only export certain pages.

When the user confirms the export, the dialog closes, and the app is responsible for what happens next — for example, showing an alert that confirms the export was successful.

Apps can export designs in the following formats:

Import the requestExport method from the @canva/design package:

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

This method opens a dialog that lets the user configure the export of their design. When calling the method, you need to pass in an array of accepted file types:

await requestExport({
  acceptedFileTypes: ["jpg", "png"],
});

These file types appear as selectable options in the export dialog.

When the user exports their design, the requestExport method returns a title for the export and an array of objects. Each of these objects has a url property that points to a static file:

const result = await requestExport({
  acceptedFileTypes: ["jpg", "png"],
});

console.log(result); // => { status: "complete", title: "My design", exportBlobs: [{ url: "https://example.com/image.png" }] }

The URL expires after 60 minutes and is secured with a Content Security Policy. We recommend downloading the exported design via the app's backend.

What the app does with the downloaded file is at the discretion of the app.

A design can have multiple pages, but not all export formats support multiple pages. For example, a PDF can have multiple pages, but there is no such thing as a multi-page PNG.

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.

The export dialog has a Back button.

When a user clicks this button, the requestExport method returns an object with a status property that has a value of "aborted":

const result = await requestExport({
  acceptedFileTypes: ["jpg", "png"],
});

// The user closed the export dialog
console.log(result); // => { status: "aborted" }

After the user clicks the Back button, you should return the user to the previous step of the app's workflow. For example, in an asset management app such as SharePoint, the user should be returned to a view of their connected images.

You can use the status property to update the UI when a user cancels an export.

• Apps must support at least one export file type.

• Apps are limited to 500 exports per user, per day, and 75 exports per user every 5 minutes.

• When a user exports a video, they can't set the quality.

• If a user without a Canva Pro subscription attempts to export a design that contains premium content, the design will have a watermark. To remove the watermark, the user will have to either:

  • Upgrade to Canva Pro
  • Export the design with a watermark
  • Purchase the premium content.

  For more information about how designs work with premium elements, see Premium elements⁠(opens in a new tab or window).

• requestExport

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

export function App() {
  async function handleClick() {
    const result = await requestExport({
      acceptedFileTypes: ["jpg", "png"],
    });

    console.log(result);
  }

  return (
    <div>
      <button onClick={handleClick}>Export design</button>
    </div>
  );
}