Content extensions

A content extension imports third-party content, such as photos and illustrations, into Canva. Users can access this content via the side panel and add it to their designs.
To create a content extension from scratch, check out the Quick start guide.
Examples of content extensions
These are some examples of apps with content extensions:
​Brandfetch - Easily add company logos to your design.
​Dropbox - Add Dropbox photos to your designs.
​Giphy - Add GIFs to your designs. Powered by GIPHY.
You can find more examples at canva.com/apps.
How users experience content extensions
Users can find apps with content extensions via the More tab.
When a user opens a content extension, the app is pinned to the left side of the screen and the content appears in the side panel. The user can then drag content into their design.
With additional configuration, a content extension can also:
​Let users search for content.
​Organize images into folders.
​Require authentication to access content.
How content extensions work
At its most basic, a content extension is a REST API.
Canva expects this API to have the following endpoint:
​/content/resources/find​
As a user interacts with a content extension via Canva's UI, Canva sends requests to this endpoint and expects to receive responses in a format that it understands. Based on these responses, Canva knows what content to render in the side panel.
Supported content types
A content extension can provide users with two types of content:
​Images, such as JPEG, PNG, and SVG files.
​Embeds, such as animated GIFs, YouTube videos, and Instagram photos.
Request-response cycle
This is the request-response cycle of a content extension:
Canva sends additional requests if the extension supports authentication.
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
  const { data } = await axios.get("https://picsum.photos/v2/list");
11
​
12
  const resources = data.map((resource) => {
13
    return {
14
      type: "IMAGE",
15
      id: resource.id,
16
      name: resource.author || resource.id,
17
      thumbnail: {
18
        url: resource.download_url,
19
      },
20
      url: resource.download_url,
21
      contentType: "image/jpeg",
22
    };
23
  });
24
​
25
  response.send({
26
    type: "SUCCESS",
27
    resources,
28
  });
29
});
30
​
31
app.listen(process.env.PORT || 3000);
Copied!

Platform concepts - Previous

Deprecation policy

Quick start

Last modified 3mo ago

Copy link

Contents

Examples of content extensions

How users experience content extensions

How content extensions work

Example