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.
- 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 (v18), and npm (v9)
- 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:
- 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 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.
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 clone (download) the repository and, ideally, pull the latest changes as updates to the starter kit are released.
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 gitbash
To learn more about installing git, including alternative options, see the official documentation.
The starter kit specifically requires Node.js v18.x.x.
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 | bashbash
Install Node.js v18 by running the following command:nvm install 18bash
To verify that the correct version is available in the current terminal session, run the following command:
If the correct version is not returned, run the following command:
nvm use 18
Or, if you're in the directory for the starter kit, simply run:
This will set the correct version based on the starter kit's
The starter kit specifically requires npm v9.
To install npm v9, run the following command:
npm install npm@10 --global
To learn TypeScript, read the official documentation.
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 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.