Skip navigation
Skip to main content

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

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:

  1. Navigate into the starter kit:

    cd canva-apps-sdk-starter-kit
    bash

  2. 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.