Quick start
Create a publish extension in under 30 minutes.
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
You don't have to create publish extensions with Node.js or Express.js, but most of the examples in this documentation use these technologies.

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. 1.
    Click the following button:
    This opens the Glitch editor with the source code of a simple publish extension.
  2. 2.
    Click Share.
  3. 3.
    Copy the URL from the Live site field. You need this URL for a later step.
Don't use Glitch's free service for production apps: it's slow and the servers hibernate after a few minutes of inactivity.

Step 2: Create an app via the Developer Portal

  1. 1.
    Log in to the Developer Portal.
  2. 2.
    Navigate to Your integrations.
  3. 3.
    Click Create app.
  4. 4.
    Enter a name for the app in the App name field.
  5. 5.
    Agree to the Canva Developer Terms.
  6. 6.
    Click Create app.

Step 3: Add a publish extension to the app

  1. 1.
    Select Publish.
  2. 2.
    Paste the Live site URL from Glitch into the Base URL field.
  3. 3.
    For the Layout option, select Basic.
  4. 4.
    For the Output file types option, select JPG and PNG.
  5. 5.
    For the Max number of pages field, enter a value of 1.
Canva automatically saves changes to apps. You’ll see a warning if you try to navigate away from the Developer Portal before your changes are saved.

Step 4: Preview the extension in the Canva editor

  1. 1.
    Click Preview.
  2. 2.
    Select the extension from the dropdown list.
  3. 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:
1
<base_url>/publish/resources/upload
Copied!
This endpoint uploads the user's design to the web server and responds with a URL that lets users view the published design.
You only have to click the Use button when using an app for the first time. On return visits, the app immediately loads.

Next steps

This guide has only scratched the surface of what's possible with publish extensions.
To learn more, refer to the following guides:
You can also create a support ticket if you need additional help.

Example

1
const express = require("express");
2
const fs = require("fs-extra");
3
const jimp = require("jimp");
4
const path = require("path");
5
const url = require("url");
6
7
const app = express();
8
9
app.use(express.json());
10
app.use(express.static("public"));
11
12
app.post("/publish/resources/upload", async (request, response) => {
13
// Ensure the "public" directory exists
14
await fs.ensureDir(path.join(__dirname, "public"));
15
16
// Get the first asset from the "assets" array
17
const [asset] = request.body.assets;
18
19
// Download the asset
20
const image = await jimp.read(asset.url);
21
const filePath = path.join(__dirname, "public", asset.name);
22
await image.writeAsync(filePath);
23
24
// Respond with the URL of the published design
25
response.send({
26
type: "SUCCESS",
27
url: url.format({
28
protocol: request.protocol,
29
host: request.get("host"),
30
pathname: asset.name,
31
}),
32
});
33
});
34
35
app.listen(process.env.PORT || 3000);
Copied!
Last modified 4d ago