Skip navigation

Skip to main content

Getting started

Overview Prerequisites Quickstart

API reference

Deprecation policy

Designing apps

App UI Kit Design guidelines Figma resource

Fundamentals

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

Platform concepts

Designs Elements Content Suspension

Developing apps

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

Resources

App components App templates

Securing apps

Content Security Policy Cross-Origin Resource Sharing HTTP request verification JSON Web Tokens Security guidelines Shared responsibility model

Monetizing apps

Innovation Fund Payment links

Distributing apps

App review process Submitting apps Submission checklist App listing guidelines Releasing apps Managing team apps Developer verification

In production

Analytics App versioning Deep linking Disabled apps Getting featured

Bundling apps

How to generate a JavaScript bundle for an app.

When you're ready to submit an app for review, you need to upload the app to the Developer Portal as a standalone JavaScript bundle. The starter kit includes a build script that handles this for you.

How to generate a bundle

Navigate into the starter kit:
```
cd canva-apps-sdk-starter-kit
```
bash
Run the following command:
```
npm run build
```
bash
An app.js file will appear in the dist directory.

How to upload a bundle

Log in to the Developer Portal.
Navigate to an app via the Your apps page.
Upload the app.js file to the App source > JavaScript file field.

Known limitations

Canva doesn't support code-splitting, so all code and dependencies must be bundled in a single file. (You can still organize your code into separate files. The webpack configuration in the starter kit takes care of the bundling.)