Content types

In the Developer Portal, content extensions have a Content type field.
This field determines:
The type of content the extension can import into Canva
The work required to create the extension
This topic describes the types of content that Canva supports and the implications of supporting them.
If you're looking for the API reference, see /content/resources/find.
Supported content types
You can configure a content extension to support the following types of content:
​Containers​
​Embeds​
​Images​
To learn more about each specific content type, see the linked documentation.
Request-response cycle
As a user interacts with a content extension, Canva sends POST requests to the following endpoint:
1
<base_url>/content/resources/find
Copied!
<base_url> is a placeholder that's replaced with the extension's Base URL.
This is an example of a request:
1
{
2
  "user": "AQ_7dBCCJN5yCxQiBX-QjJLT8ZnLwn-0kISpwpHqh68=",
3
  "brand": "AQ_7dBC9ihGVL06M4KkBKreDsSoZcZZAwbrdzwgDkjs=",
4
  "label": "CONTENT",
5
  "limit": 8,
6
  "locale": "en",
7
  "type": "IMAGE",
8
  "types": ["IMAGE"]
9
}
Copied!
The body of this request contains a types array. Each value in this array is an uppercase string that corresponds to one of the supported content types:
"CONTAINER"
"EMBED"
"IMAGE"
In response to this request, the extension must provide an array of resources. (The term resource is how Canva’s API generally refers to an individual piece of content.)
The type property is superseded by the types property. Canva only sends the type property for backwards compatibility reasons.
This is an example of a response that doesn't have any resources:
1
{
2
  "type": "SUCCESS",
3
  "resources": []
4
}
Copied!
The type of content an extension can include in a response depends on the value of the types array. For example, if the types array contains "IMAGE" and "EMBED", the extension can respond with images, embeds, or a combination of the two.
You can represent each resource as an object with a type property and metadata that describes the resource. For example, this is an "IMAGE" resource:
1
{
2
  "type": "IMAGE",
3
  "id": "1025",
4
  "name": "Matthew Wiebe",
5
  "thumbnail": { "url": "https://picsum.photos/id/1025/4951/3301" },
6
  "url": "https://picsum.photos/id/1025/4951/3301",
7
  "contentType": "image/jpeg"
8
}
Copied!
Some properties are required for all content types, such as id and name, but other properties are only required for certain types of content. The details are described in the API reference.
After receiving a response from the extension, Canva renders the resources in the side panel. This is an example of an extension that renders a container, image, and embed:
Limitations
You can't submit an app for review if it has a content extension that only has the Container option selected for its Content type. This is because an extension that only provides users with containers isn't useful.
Example
This example assumes the extension is configured to support images, embeds, and containers.
1
const express = require("express");
2
​
3
const app = express();
4
​
5
app.use(express.json());
6
app.use(express.static("public"));
7
​
8
app.post("/content/resources/find", async (request, response) => {
9
  const resources = [];
10
​
11
  if (request.body.types.includes("CONTAINER")) {
12
    resources.push({
13
      type: "CONTAINER",
14
      id: "things",
15
      name: "Things",
16
    });
17
  }
18
​
19
  if (request.body.types.includes("IMAGE")) {
20
    resources.push({
21
      type: "IMAGE",
22
      id: "1025",
23
      name: "Matthew Wiebe",
24
      thumbnail: { url: "https://picsum.photos/id/1025/4951/3301" },
25
      url: "https://picsum.photos/id/1025/4951/3301",
26
      contentType: "image/jpeg",
27
    });
28
  }
29
​
30
  if (request.body.types.includes("EMBED")) {
31
    resources.push({
32
      id: "dQw4w9WgXcQ",
33
      name: "Rick Astley - Never Gonna Give You Up",
34
      type: "EMBED",
35
      thumbnail: {
36
        url: "https://i.imgur.com/Q2Unw.gif",
37
      },
38
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
39
    });
40
  }
41
​
42
  response.send({
43
    type: "SUCCESS",
44
    resources,
45
  });
46
});
47
​
48
app.listen(process.env.PORT || 3000);
Copied!

Quick start

Images

Last modified 2mo ago

Copy link

Contents

Supported content types

Request-response cycle

Limitations

Example