Setting up the 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.
It's technically possible to create apps without the starter kit, but the documentation assumes you're using it.
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.gitcd canva-apps-sdk-starter-kitnpm install
To set up the starter kit, the following tools need to be installed:
- 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
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
Step 2: Install the dependencies
package.json file contains a number of dependencies, such as React.
To install the dependencies:
Navigate into starter kit:cd canva-apps-sdk-starter-kitbash
Run the following command:npm installbash
Step 3: Explore the starter kit
In particular, here's a few details worth highlighting:
- The entry point for the app is the
- The app uses the App UI Kit to mimic the look and feel of Canva.
examplesdirectory contains usage examples for the APIs.
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.