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. Navigate to an app via the Developer Portal.

  2. From the Extensions page, expand the Editing panel.

  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:

const canva = window.canva.init();
canva.onReady(async (opts) => {
console.log(opts.assets);
});

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:

{
"attractive-technical-writer.png": "https://..."
}

You can use the URL to download the asset:

canva.onReady(async (opts) => {
// Get the URL of an asset
const url = opts.assets["attractive-technical-writer.png"];
// Download the asset
const asset = await fetch(url);
});

Example

To run this example, upload a file named "attractive-technical-writer.png" to the extension's Assets field.

const canva = window.canva.init();
canva.onReady(async (opts) => {
// Get the URL of an asset
const url = opts.assets["attractive-technical-writer.png"];
// Download the asset
const asset = await fetch(url);
// Do something with the asset
console.log(asset);
});