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. Click the following button:

    Remix on Glitch

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

  2. Click Share.

  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. Log in to the Developer Portal.

  2. Navigate to Your integrations.

  3. Click Create app.

  4. Enter a name for the app in the App name field.

  5. Agree to the Canva Developer Terms.

  6. Click Create app.

Step 3: Add a content extension to the app

  1. Select Content.

  2. Select Content type > Images.

  3. Select Layout > Grid.

  4. Paste the Live site URL from Glitch into the Base URL field.

Step 4: Preview the extension in the Canva editor

  1. Click Preview.

  2. Select the extension from the dropdown list.

  3. Click Connect.

When the extension loads, Canva sends a POST request to the following endpoint:

<base_url>/content/resources/find

This endpoint responds with an array of images, which Canva renders in the side panel.

You only have to connect an app when using it 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.

Example

const axios = require("axios");
const express = require("express");
const app = express();
app.use(express.json());
app.use(express.static("public"));
app.post("/content/resources/find", async (request, response) => {
// Get a list of images
const { data } = await axios.get("https://picsum.photos/v2/list");
// Create an array of resources
const resources = data.map((resource) => {
return {
type: "IMAGE",
id: resource.id, // This ID should always refer to the same piece of media
name: resource.author || resource.id,
thumbnail: {
url: resource.download_url,
},
url: resource.download_url,
contentType: "image/jpeg",
};
});
// Respond with the resources
response.send({
type: "SUCCESS",
resources,
});
});
app.listen(process.env.PORT || 3000);