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 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:

• Sign up for a Canva account.
• Set up Multi-Factor Authentication (MFA) on your Canva account.
• Install git, Node.js v20.14.0, and npm v9 or v10.

To make sure you're running the correct version of Node.js, we recommend using a version manager like nvm. The .nvmrc 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.
2. Navigate to the Your integrations page.
3. Click Create an integration.
4. Select the type of integration you want to create:
   • Public: Public integrations are available to all Canva users, but the integration must first be reviewed by Canva and meet the integration requirements.
   • Private: Private integrations can only be used by your team on a Canva Enterprise plan.
5. Select the checkbox to agree to the Canva Developer Terms.
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:

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

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

Step 4: Install dependencies

Install the dependencies in the repository root:

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

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

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.

<ChinaContent>

• BASE_CANVA_CONNECT_API_URL: This is the base URL for the Connect APIs. For China, use https://api.canva.cn/rest.
• BASE_CANVA_CONNECT_AUTH_URL: This is the base URL for the Canva authorization endpoint. For China, use https://www.canva.cn/api. </ChinaContent>

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

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. 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.

Step 8 (Optional): Setup the Canva Dev MCP Server

If you're using AI coding tools, such as Cursor or Claude Code, you can connect to the Canva Dev MCP Server to supercharge your development workflow. See this setup guide to get started.

Optional: Generate a client SDK

The Connect API's OpenAPI description is publicly available at https://www.canva.dev/sources/connect/api/latest/api.yml.

You can use this description to generate a client SDK in your preferred language, using a code generation library like openapi-generator.

TypeScript SDK

This example uses openapi-ts to generate the TypeScript SDK in client/ts.

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

npm run generate

Next steps

• Learn how to generate dynamic designs, using Brand template and the Autofill APIs.
• Learn about security practices for the Connect APIs.