Skip navigation
Skip to main content

Quick start

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

Canva's app development platform allows anyone to create apps that enhance 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 v20.10.0, and npm v10.
  • 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

    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 about 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 starts running at http://localhost:8080, but you can't use this URL to view the local preview, see the next step instead.

Step 3: Preview the app

This step explains how to use Canva to view the app running locally 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.

The example app includes a button that responds with "Hello world" when clicked:

Preview of the app running locally, with a button saying "Do something cool"

To learn more about how to preview apps, including how to set up live reloading, see Previewing apps.

Step 4: Start editing code

You can quickly get started by editing the example app demonstrated above.

Use a code editor to open src/app.tsx. This file contains placeholder code that you can edit to start building your app.

In the following example, a button click triggers the addNativeElement method, adding a new text layer to the Canva design with the words "Hello world!".

import { Button, Rows, Text } from "@canva/app-ui-kit";
import { addNativeElement } from "@canva/design";
import * as styles from "styles/components.css";


export const App = () => {
  const onClick = () => {
    addNativeElement({
      type: "TEXT",
      children: ["Hello world!"],
    });
  };


  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          To make changes to this app, edit the <code>src/app.tsx</code> file,
          then close and reopen the app in the editor to preview the changes.
        </Text>
        <Button variant="primary" onClick={onClick} stretch>
          Do something cool
        </Button>
      </Rows>
    </div>
  );
};
tsx

Next steps