Skip navigation

Skip to main content

Quickstart

How to integrate an app with Canva, using the Connect APIs.

To help you get started with the Connect APIs, Canva has created an example app in a GitHub repository⁠(opens in a new tab or window) that demonstrates some of the main features.

This guide shows you how to clone the repository, configure the app, and run it locally on your machine. You can then review the source code to understand how its features work.

Prerequisites

To follow this guide, you'll need to:

To make sure you're running the correct version of Node.js, we recommend using a version manager like nvm⁠(opens in a new tab or window). The .nvmrc⁠(opens in a new tab or window) file in the repository's root directory will ensure the correct version is used when you run nvm install.

Step 1: Create a Canva integration

Create a new integration:

  1. Log in to the Developer Portal⁠(opens in a new tab or window).
  2. Navigate to the Your integrations⁠(opens in a new tab or window) page.
  3. Click Create an integration.
  4. Select the type of integration you want to create:
  5. Select the checkbox to agree to the Canva Developer Terms⁠(opens in a new tab or window).
  6. Click Create integration.

Step 2: Configure your Canva integration

Configure the integration's scope, secret, and authentication settings:

  1. Under Configuration → Configure your integration, set the following values:

    • Integration name: Add a name.
    • Client ID: Make a note of this value; you'll need it in a later step.
    • Generate secret. Click this and save the secret in a secure location, because you'll need it for a later step and won't be able to retrieve it then.

  2. Under Scopes → Set the scopes, check the following boxes:

    • design:content: Read and Write.
    • design:meta: Read.
    • asset: Read and Write.
    • brandtemplate:meta: Read.
    • brandtemplate:content: Read.
    • profile: Read.

  3. Under Authentication → Add Authentication, locate URL 1 and enter the following value:

    http://127.0.0.1:3001/oauth/redirect

  4. In Return navigation, enable the Enable return navigation switch, and enter the following value for Return URL:

    http://127.0.0.1:3001/return-nav

Step 3: Clone the repository

Clone the example repository to your local machine:

git clone https://github.com/canva-sdks/canva-connect-api-starter-kit.git
BASH

Step 4: Install dependencies

Install the dependencies in the repository root:

cd canva-connect-api-starter-kit
npm install
BASH

Step 5: Configure the env file

Add your integration settings to the demos/ecommerce_shop/.env file. For example, you can use code from the command line to open the file in Visual Studio Code:

cd demos/ecommerce_shop
code .env
BASH

Update the following values:

  • CANVA_CLIENT_ID: This is the client ID from Step 2.
  • CANVA_CLIENT_SECRET: This is the client secret you generated in Step 2. You can generate a new one if you no longer have it.

Step 6: Run the app

In the demos/ecommerce_shop directory, run the following command to start the app locally on your machine:

npm start
BASH

Step 7: View the app

With the app running locally on your machine, you can now authorize the app to access your Canva account using OAuth:

  1. Use your browser to access the app at http://127.0.0.1:3000⁠(opens in a new tab or window). Don't use localhost:3000, as you might get CORS errors.
  2. Click the Connect to Canva button and follow the prompts in the popup window.
  3. Navigate through the app to view your Canva resources.

Optional: Generate a client SDK

The Connect API's OpenAPI specification is publicly available at https://github.com/canva-sdks/canva-connect-api-starter-kit/blob/main/openapi/spec.yml⁠(opens in a new tab or window).

You can use this specification to generate a client SDK in your preferred language, using a code generation library like openapi-generator⁠(opens in a new tab or window).

TypeScript SDK

This example uses openapi-ts⁠(opens in a new tab or window) to generate the TypeScript SDK in client/ts⁠(opens in a new tab or window).

To regenerate the types, run the following command from the repository root:

npm run generate
BASH

Next steps