Setting up the starter kit

How to set up Canva's app development starter kit.

By itself, creating an app via the Developer Portal doesn't do anything. You need to write the source code that defines the app's behavior and then share that code with Canva.

The source code must be provided as a standalone JavaScript bundle. To make it as easy as possible to generate this bundle, we've created a starter kit — a GitHub repository that contains the boilerplate of an app and all of the tooling we recommend, including the App UI Kit, TypeScript, React, and webpack.

It's technically possible to create apps without the starter kit, but the documentation assumes you're using it.

TL;DR

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit
npm install

bash

Prerequisites

To set up the starter kit, the following tools need to be installed:

git
Node.js v18
npm v10

To learn more, see Prerequisites.

Step 1: Clone the starter kit

The starter kit is available as a GitHub repo.

To clone the starter kit, run the following command:

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git

bash

By default, the repo is cloned into a directory named canva-apps-sdk-starter-kit. You can customize this name by passing a different name into the git clone command:

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git my-custom-name

bash

Step 2: Install the dependencies

The package.json file contains a number of dependencies, such as React.

To install the dependencies:

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

Step 3: Explore the starter kit

Take a moment to explore the starter kit. If you have experience with modern JavaScript development, the structure and conventions should look familiar.

In particular, here's a few details worth highlighting:

The entry point for the app is the src/app.tsx file.
The app uses the App UI Kit to mimic the look and feel of Canva.
The examples directory contains usage examples for the APIs.

Next step

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. To learn how to do this, see Previewing apps.