Quickstart

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 guide demonstrates how to create a content extension that imports content from Lorem Picsum⁠(opens in a new tab or window), an API for placeholder photos.

This guide assumes experience with:

• JSON APIs
• Node.js
• Express.js

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⁠(opens in a new tab or window), 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:

   ⁠(opens in a new tab or window)

   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.

1. Log in to the Developer Portal⁠(opens in a new tab or window).
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 Create content.
7. Click Next.
8. Click Create app.

1. Paste the Live site URL from Glitch into the Base URL field.
2. For the Layout option, select Grid.
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.

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

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.

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

To learn more, refer to the following guides:

• Pagination
• Search
• Authentication

You can also create a support ticket⁠(opens in a new tab or window) if you need additional help.

To provide users the best experience with content extensions, see UX guidelines for content extensions.

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);