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 simplify the process of generating this bundle, we've created a starter kit⁠(opens in a new tab or window) — a GitHub repository that contains the boilerplate of an app and all the recommended tooling, including the App UI Kit, TypeScript⁠(opens in a new tab or window), React⁠(opens in a new tab or window), and webpack⁠(opens in a new tab or window).

While it's technically possible to create apps without the starter kit, 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 v20.10.0
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 the 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 are 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.