Quick start
Create a content extension in under 30 minutes.
A content extension imports content, such as photos and illustrations, into Canva. Users can access this content via the side panel and add it to their designs.
This quick start guide demonstrates how to create a content extension that imports content from Lorem Picsum, an API for placeholder photos.

Prerequisites

This guide assumes experience with:
  • JSON APIs
  • Node.js
  • Express.js
You don't have to create content 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 content 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 content 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 an app.
  4. 4.
    Choose a target audience for the app. (The default option is Everyone.)
  5. 5.
    Click Next.
  6. 6.
    Select Create content.
  7. 7.
    Click Next.
  8. 8.
    Click Create app.

Step 3: Configure the content extension

  1. 1.
    Paste the Live site URL from Glitch into the Base URL field.
  2. 2.
    For the Layout option, select Grid.
  3. 3.
    For the Content type option, select Images.
For guidelines on choosing the layout that’s most appropriate for your content type, see Choose the best layout.
To learn about the supported content types, see Content types. For additional requirements that apply to each content type, see Choose the best content types.
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 the extension loads, Canva sends a POST request to the following endpoint:
1
<base_url>/content/resources/find
Copied!
This endpoint responds with an array of images, which Canva renders in the side panel.
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 content extensions.
To learn more, refer to the following guides:
You can also create a support ticket if you need additional help.
To provide users the best experience with content extensions, see UX guidelines for content extensions.

Example

1
const axios = require("axios");
2
const express = require("express");
3
4
const app = express();
5
6
app.use(express.json());
7
app.use(express.static("public"));
8
9
app.post("/content/resources/find", async (request, response) => {
10
// Get a list of images
11
const { data } = await axios.get("https://picsum.photos/v2/list");
12
13
// Create an array of resources
14
const resources = data.map((resource) => {
15
return {
16
type: "IMAGE",
17
id: resource.id, // This ID should always refer to the same piece of media
18
name: resource.author || resource.id,
19
thumbnail: {
20
url: resource.download_url,
21
},
22
url: resource.download_url,
23
contentType: "image/jpeg",
24
};
25
});
26
27
// Respond with the resources
28
response.send({
29
type: "SUCCESS",
30
resources,
31
});
32
});
33
34
app.listen(process.env.PORT || 3000);
Copied!