How-to guides

Getting started Creating designs Downloading designs Editing designs Customization

Downloading designs

Download a published design with the JavaScript API.

The Canva editor has a Publish button. When a user clicks this button and navigates through the publishing workflow, your website can use the JavaScript API to download the user's design as an image file.

To detect when a user publishes a design, register the onDesignPublish callback via the createDesign or editDesign methods:

api.createDesign({
  design: {
    type: "Poster",
  },
  onDesignPublish: (opts) => {
    console.log(opts.exportUrl);
  },
});

javascript

The onDesignPublish callback receives an opts.exportUrl argument. This argument contains the URL of the user's published design. You can use this URL to download the design.

You can control the export format of the user's design by setting the opts.editor.fileType argument in the createDesign method:

api.createDesign({
  design: {
    type: "Poster",
  },
  editor: {
    fileType: "jpg",
  },
  onDesignPublish: (opts) => {
    console.log(opts.exportUrl);
  },
});

javascript

The default value is png.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canva Button</title>
    <script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
  </head>
  <body>
    <button>Create design</button>
    <script type="text/javascript">
      (async () => {
        if (!window.Canva || !window.Canva.DesignButton) {
          return;
        }

        const api = await window.Canva.DesignButton.initialize({
          apiKey: "API KEY GOES HERE",
        });

        const button = document.querySelector("button");

        button.onclick = () => {
          api.createDesign({
            design: {
              type: "Poster",
            },
            onDesignPublish: (opts) => {
              // Download the user's design
              window.open(opts.exportUrl, "_blank");
            },
          });
        };
      })();
    </script>
  </body>
</html>

markup