Quick start

Get an app up and running in a matter of minutes.

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.

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.

  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.

  1. Clone the following repo:

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

    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
  3. Install the dependencies:

    npm install
    bash
  4. Start the local development server:

    npm run start
    bash

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

  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.

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.