Quick start

A publish extension adds a publish destination to Canva. This destination appears in the Publish menu. Users can then publish their designs to the destination platform.

This quick start guide demonstrates how to create a publish extension that uploads the user's design to a directory on a web server.

Prerequisites

This guide assumes experience with:

• JSON APIs
• Node.js
• Express.js

Step 1: Set up a Base URL

At its most basic, a publish extension is an API that receives requests from Canva and responds with data in a format that Canva understands. Canva expects this API to have certain paths to handle different requests.

To get an API up and running as quickly as possible, we recommend using Glitch, a web-based editor for creating and deploying Node.js apps. Glitch is free and registration is not required.

To set up a project with Glitch:

1. Click the following button:

   

   This opens the Glitch editor with the source code of a simple publish extension.

2. Click Share.

3. Copy the URL from the Live site field. You need this URL for a later step.

Step 2: Create an app via the Developer Portal

1. Log in to the Developer Portal.
2. Navigate to Your integrations.
3. Click Create an app.
4. Choose a target audience for the app. (The default option is Everyone.)
5. Click Next.
6. Select Publish designs.
7. Click Next.
8. Click Create app.

Step 3: Configure the publish extension

1. Paste the Live site URL from Glitch into the Base URL field.
2. For the Layout option, select Basic.
3. For the Output file types option, select JPG and PNG.
4. For the Max number of pages field, enter a value of 1.

To learn about the available layouts, see Layouts. For guidelines on choosing the layout that's most appropriate for the destination platform, see Choose the best layout.

Step 4: Preview the extension in the Canva editor

1. Click Preview.
2. Select the extension from the dropdown list.
3. Click Use.

When a user publishes their design by clicking the extension's Save button, Canva sends a POST request to the following endpoint:

<base_url>/publish/resources/upload

This endpoint uploads the user's design to the web server and responds with a URL that lets users view the published design.

Next steps

This guide has only scratched the surface of what's possible with publish extensions.

To learn more, refer to the following guides:

• Pagination
• Search
• Authentication

You can also create a support ticket if you need additional help.

Example

const express = require("express");
const fs = require("fs-extra");
const jimp = require("jimp");
const path = require("path");
const url = require("url");

const app = express();

app.use(express.json());
app.use(express.static("public"));

app.post("/publish/resources/upload", async (request, response) => {
  // Ensure the "public" directory exists
  await fs.ensureDir(path.join(__dirname, "public"));

  // Get the first asset from the "assets" array
  const [asset] = request.body.assets;

  // Download the asset
  const image = await jimp.read(asset.url);
  const filePath = path.join(__dirname, "public", asset.name);
  await image.writeAsync(filePath);

  // Respond with the URL of the published design
  response.send({
    type: "SUCCESS",
    url: url.format({
      protocol: request.protocol,
      host: request.get("host"),
      pathname: asset.name,
    }),
  });
});

app.listen(process.env.PORT || 3000);