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

Prerequisites

A list of the skills and tools you need to create an app.

For the most part, developing a Canva App is a lot like developing any other web-based software, so any knowledge you have of modern coding standards, tools, and workflows will come in handy. That said, we don't want to assume that everyone has the same background, so this page outlines exactly what you'll need to develop an app.

TL;DR

You'll need:

A relatively modern web browser
A free Canva.com account
A command line application, such as Terminal on macOS
An installation of git, Node.js (v20.10.0), and npm (v10)
Some knowledge of TypeScript, React, and webpack

Web browser

You need a relatively modern web browser to develop apps on Canva.

Canva officially supports the following browsers:

Google Chrome, version 57 or higher
Mozilla Firefox, version 52 or higher
Safari, version 12 or higher
Microsoft Edge, version 89 or higher
Opera, version 44 or higher

It's worth noting, however, that:

Some browsers, such as Safari, have security features that interfere with the development workflow.
Internally, we use the latest version of Google Chrome, so that's the version we can actively support.
It's easier to preview an app in a standalone browser, rather than using Canva's desktop app.

Canva.com account

Canva has a Developer Portal for creating, configuring, and otherwise managing apps. Anyone with a standard Canva account has complete access to the Developer Portal. To sign up for Canva, click here.

Terminal

A terminal is an application for running commands that deliver instructions to a computer. This is in contrast to graphical user interfaces (GUIs) that rely on button presses and other forms of interaction. You'll need access to a terminal for various parts of the development workflow, along with some basic command line experience.

All major operating systems have a default terminal:

On macOS, the default terminal is called Terminal.
On Windows, the default terminal is called Command Prompt.
On Linux, the default terminal depends on the distribution.

git

git is a version control system that makes it easier to collaborate on and release new versions of code. We use a git repository to distribute a starter kit for developing apps, so you'll need to know how clone (download) the repository and, ideally, pull the latest changes as updates to the starter kit are released.

Installing git

To install git on macOS, we recommend using the Homebrew package manager:

Install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

bash

Run the following command:
```
brew install git
```
bash

To learn more about installing git, including alternative options, see the official documentation.

Node.js (v20.10.0)

Node.js is a JavaScript runtime that allows JavaScript to run outside of a browser. We use Node.js in the starter kit as it's a key dependency of developer tooling that we rely on, such as webpack.

The starter kit specifically requires Node.js v20.10.0.

Installing Node.js

To install Node.js, we recommend using Node Version Manager (nvm). This is a tool for managing multiple versions of Node.js on a single system, which reduces the risk of frustrating versioning errors.

Install nvm by running the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

bash

At the root of the starter repo, install Node.js by running the following command:
```
nvm install
```
bash

To verify that the correct version is available in the current terminal session, run the following command:

node -v

bash

If the correct version is not returned, run the following command:

nvm use 20.10.0

bash

Or, if you're in the directory for the starter kit, simply run:

nvm use

bash

This will set the correct version based on the starter kit's .nvmrc file.

npm (v10)

npm is a package manager for JavaScript. We use it in the starter kit for installing dependencies. For example, the App UI Kit is available as an npm package and a package manager is required to install it. There are other package managers available, such as Yarn, but npm is included with Node.js by default, so it's the most convenient option.

The starter kit specifically requires npm v10.

To install npm v10, run the following command:

npm install npm@10 --global

bash

TypeScript

TypeScript is a superset of JavaScript that adds a variety of features to the language. These features — in particular, static typing — make the language more robust, reducing the likelihood of common errors.

Technically speaking, TypeScript is not required to develop an app. You can use JavaScript. The starter kit is set up to use TypeScript though, and all of the documentation and code samples assume that you're using it.

To learn TypeScript, read the official documentation.

React

React is a library for creating fast and interactive user interfaces. It's not strictly required to develop an app, but it's what we use in the starter kit and documentation, and it's required to use the App UI Kit.

To learn React, read the official documentation.

webpack

webpack is what's called a module bundler. It's a tool that combines multiple code files into a single file. The process of combining files is known as bundling and the file output by a module bundler is known as a bundle.

We use webpack in the starter kit, as apps must be uploaded to the Developer Portal as a single file. You shouldn't have to work with webpack directly, but some familiarity may be useful if you want to go off the beaten path.

To learn more about webpack, read the official documentation.