Quick start

Canva's app development platform lets anyone create apps that add features to Canva. This quick start guide explains how to get an app up and running in a matter of minutes.

Before you begin

To follow this guide, you'll need to:

• Sign up for a Canva.com account.
• Install git, Node.js v18, and npm v9.
• Learn the fundamentals of TypeScript, React, and webpack.

If you need help with any of these prerequisites, including how to set up the required tooling, see Prerequisites.

Step 1: Create an app via the Developer Portal

1. Log in to the Developer Portal

2. Navigate to the Your apps page.

3. Click Create an app.

4. Select a target audience for the app:

   • Public: You can make your app available to all of Canva's users, but the app will need to be reviewed by Canva and meet the requirements outlined in the submission checklist.
   • Restrict to your team: The app can only be made available to members of the current team and the team's administrators are responsible for reviewing it.

5. Agree to the terms and conditions.

6. Click Create.

Step 2: Set up the starter kit

1. Clone the following repo:

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

   bash

   Copy

   This repo contains the starter kit for the Apps SDK. The starter kit is a boilerplate for an app and all of the tooling we recommend. To learn more the starter kit, see Setting up the starter kit.

2. Navigate into the cloned directory for the starter kit:

   cd canva-apps-sdk-starter-kit

   bash

   Copy

3. Install the dependencies:

   npm install

   bash

   Copy

4. Start the local development server:

   npm run start

   bash

   Copy

   The local development server will become available at http://localhost:8080.

Step 3: Preview the app

1. In the Developer Portal, navigate to the app’s Configure your app page.
2. Select App source > Development URL.
3. In the Development URL field, enter the URL of the development server.
4. To open the app in a new tab, click Preview.
5. To install the app, click Open.

Next steps

Now that your app is up and running, the next step is to start developing it:

• To jump straight into the code, start editing the src/app.tsx file.
• To learn more about the Apps SDK, see Integrating with Canva.