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 still need to write the source code that defines the app's behavior and then share that code with Canva.

The source code must be shared 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:

You can create apps without the starter kit, but the documentation assumes you're using it.

TL;DR

Run the following commands:

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

Requirements

git
Node.js v18

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

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
```
Run the following command:
```
npm install
```

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.

Here's a few details worth highlighting:

The entry point for the app is the src/app.tsx file
The examples directory contains demonstrations of the available APIs
The package.json file has scripts for running and bundling the app

Next steps

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.