Assets
Download binary assets to an extension at runtime.
In the Developer Portal, some extensions have an Assets field. You can use this field to upload assets, such as images and JSON files, to Canva's servers. The extension can then download the assets at runtime. This is more efficient than embedding binary files in the extension's source code as base64-encoded strings.
This tutorial explains how to download assets to an extension at runtime.

Step 1: Upload assets

  1. 1.
    Navigate to an app via the Developer Portal.
  2. 2.
    From the Extensions page, expand the Editing panel.
  3. 3.
    Drag and drop files into the Assets field.

Supported asset types

You can upload the following types of assets to the Developer Portal:
Type
Extension
Binary file
.bin
Cascading style sheet
.css
Data file
.data
Microsoft XPS Document Fragment
.frag
Joint Photographic Experts Group
.jpg
Joint Photographic Experts Group
.jpeg
JavaScript Object Notation
.json
Portable Network Graphic
.png
Scalable Vector Graphics
.svg
Vertex Shader File
.vert

Step 2: Download assets

Canva passes the URLs of assets via the onReady callback's opts.assets property:
1
const canva = window.canva.init();
2
3
canva.onReady(async (opts) => {
4
console.log(opts.assets);
5
});
Copied!
The opts.assets property is an object. Each key in the object is the file name of an asset and each value is the URL of the asset:
1
{
2
"attractive-technical-writer.png": "https://..."
3
}
Copied!
You can use the URL to download the asset:
1
canva.onReady(async (opts) => {
2
// Get the URL of an asset
3
const url = opts.assets["attractive-technical-writer.png"];
4
5
// Download the asset
6
const asset = await fetch(url);
7
});
Copied!

Example

To run this example, upload a file named "attractive-technical-writer.png" to the extension's Assets field.
1
const canva = window.canva.init();
2
3
canva.onReady(async (opts) => {
4
// Get the URL of an asset
5
const url = opts.assets["attractive-technical-writer.png"];
6
7
// Download the asset
8
const asset = await fetch(url);
9
10
// Do something with the asset
11
console.log(asset);
12
});
Copied!
Last modified 27d ago