Setting up the 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.gitcd canva-apps-sdk-starter-kitnpm 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.