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​
​Videos​
To learn more about each specific content type, see the linked documentation.
For guidelines on choosing the layout that’s most appropriate for your content type, see Choose the best layout.
For additional requirements that apply to each content type, see Choose the best content types.
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"
"VIDEO"
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.)
In the request body, the types property has superseded the now-deprecated type 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:
For guidelines on keeping the users informed when you can’t show the initial content, see Handle empty states.
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
To see a complete preview of this extension, configure it to support images, embeds, containers, and videos.
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
  if (request.body.types.includes("VIDEO")) {
43
    resources.push({
44
      id: "125",
45
      name: "Yellow flowers",
46
      type: "VIDEO",
47
      thumbnail: {
48
        url: "https://i.vimeocdn.com/video/529927645_640x360.jpg",
49
      },
50
      url: "https://player.vimeo.com/external/135736646.hd.mp4?s=ed02d71c92dd0df7d1110045e6eb65a6&profile_id=174",
51
    });
52
  }
53
​
54
  response.send({
55
    type: "SUCCESS",
56
    resources,
57
  });
58
});
59
​
60
app.listen(process.env.PORT || 3000);
Copied!

Quick start

Images

Last modified 1mo ago

Copy link

Contents

Supported content types

Request-response cycle

Limitations

Example