Prerequisites

For the most part, developing a Canva App is similar to developing any other web-based software, so any knowledge you have of modern coding standards, tools, and workflows will be beneficial. However, 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.

You'll need:

• A relatively modern web browser
• A free Canva⁠(opens in a new tab or window) 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

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

Canva officially supports the following browsers⁠(opens in a new tab or window):

• Google Chrome, version 86 or higher
• Mozilla Firefox, version 88 or higher
• Safari, version 13 or higher
• Microsoft Edge, version 89 or higher
• Opera, version 76 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⁠(opens in a new tab or window).

Canva has a Developer Portal⁠(opens in a new tab or window) 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⁠(opens in a new tab or window).

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 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 to clone (download) the repository and, ideally, pull the latest changes as updates to the starter kit are released.

winget install --id Git.Git -e --source winget

# Debian/Ubuntu
apt-get install git

# Fedora
dnf install git

# Arch Linux
pacman -Syu git

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⁠(opens in a new tab or window).

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

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

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

node -v

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

nvm use 20.10.0

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

nvm use

This will set the correct version based on the starter kit's .nvmrc⁠(opens in a new tab or window) file.

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⁠(opens in a new tab or window) and a package manager is required to install it. There are other package managers available, such as Yarn⁠(opens in a new tab or window), 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

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⁠(opens in a new tab or window).

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⁠(opens in a new tab or window).

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⁠(opens in a new tab or window).