Getting started

Overview Prerequisites Quick start API reference

Designing apps

App UI Kit Design guidelines Figma resource

Fundamentals

Creating apps Setting up the starter kit Previewing apps Integrating with Canva Configuring permissions Handling errors Using a backend Bundling apps

Developing apps

Authenticating users Creating app elements Creating audio tracks Creating images Creating image overlays Creating shapes Creating tables Creating text Creating videos Embedding rich media Exporting designs Grouping elements Positioning elements Reading elements Replacing elements Supporting drag and drop Uploading assets Using color selectors Using design IDs

Securing apps

Content Security Policy Cross-Origin Resource Sharing Verifying JWTs Verifying HTTP requests Security guidelines

Monetizing apps

Innovation Fund Accepting payments

Distributing apps

App review process Submitting apps Submission checklist App listing guidelines Releasing apps Tracking analytics Versioning apps Handling disabled apps Deep linking to apps Managing team apps Getting featured Developer verification

Previewing apps

How to preview apps via the Developer Portal.

After setting up the starter kit, the next step is to preview your app in the Canva editor — and, ideally, preview it at regular intervals.

There are two ways to do this:

Generate a JavaScript bundle and upload it via the Developer Portal.
Load the app from a local development server.

It'd be tedious to generate and upload a bundle after every change, so the first option is intended for when you're ready to submit the app for review. To learn more, see Bundling apps.

The second option is ideal during development, because it offers the fastest development loop.

Step 1: Start the local development server

The starter kit contains webpack configuration for starting a local development server. This server exposes the app's source code via a URL that can be shared with Canva.

To start the local development server:

Navigate into the starter kit:
```
cd canva-apps-sdk-starter-kit
```
bash
Run the following command:
```
npm run start
```
bash

The local server is available at http://localhost:8080 by default. If you navigate to this URL, you should see the app's (minified) source code.

Using HTTPS

By default, the development server does not use the HTTPS protocol. This is convenient, because there's no need for a security certificate, but it prevents you from previewing an app in Safari.

If you're using Safari (or otherwise need to use HTTPS):

Start the development server with the --use-https flag:
```
npm run start --use-https
```
bash
Navigate to https://localhost:8080.
Bypass the invalid security certificate warning:
1. Click Show details.
2. Click Visit website.

You'll need to bypass the invalid security certificate warning every time you start the server.

Step 2: Configure the Development URL

In the Developer Portal, set the App source > Development URL field to the URL of the local development server. This field tells Canva to load the app's source code from the specified URL.

The development URL for an app

The URL must point directly to a standalone JavaScript file.

Step 3: Preview the app

In the Developer Portal, click the Preview button.

This will open the app in a new tab.

The first time you open an app, it must be connected (installed). To do this, click the Open button. The app will then load within the iframe.

Reloading the app

If you make a change to the app — for example, by editing the src/app.tsx file — that change is not immediately reflected in the app's iframe. You need to reload the app to preview the changes.

You can reload an app manually or automatically as the code changes.

Manual

To manually reload the app, do any of the following:

Click the Reload button in the app's header.

The Reload button is only visible if the app is under active development, in the Draft state. It's not visible once the app has been submitted for review or released.
Return to the Developer Portal and click the Preview button.
Right-click in the app's iframe and select Reload frame.
Close and re-open the app in the Canva editor.

Automatic

The most efficient way to preview changes is with Hot Module Replacement (HMR). This is a feature of webpack that will automatically reload the app whenever the source code changes.

To enable HMR:

Navigate to an app via the Your apps.
Select Configure your app.
Copy the value from the App origin field. This value is unique to each app and cannot be customized.
In the starter kit's directory, open the .env file.
Set the CANVA_APP_ORIGIN environment variable to the value copied from the App origin field:
```
CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE
```
bash
Set the CANVA_HMR_ENABLED environment variable to true:
```
CANVA_HMR_ENABLED=true
```
bash
Restart the local development server.
Reload the app manually to ensure that HMR takes effect.

All changes to the source code will automatically be reflected in the app's iframe.

Previewing apps via the desktop app

Although Canva has a desktop app, we recommend previewing apps via the web browser. Previewing apps via the desktop app requires a self-signed SSL certificate, which requires extra work without any meaningful benefit and is not something we actively support.

Previewing apps on mobile devices

Canva is extremely popular on mobile devices, so it's important to preview and test your app on them. The local development server on your computer won't be accessible via a mobile device though, so you'll need to use either of the following workarounds:

Use ngrok to make the local development server available to the public internet and change your app's Development URL field to the ngrok-generated URL.
Upload a JavaScript bundle to the JavaScript file field.

Known limitations

You can't preview an app outside of the Canva editor. This is because the Apps SDK must be able to send and receive messages to and from the editor.

Next step

Once you have an app up and running in the Canva editor, you can start writing code that hooks into the Canva editor by calling APIs exposed by the Apps SDK. To learn how, see Integrating with Canva.