Quick start
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.com account.
- Set up Multi-Factor Authentication (MFA) on your Canva account.
- Install git, Node.js
v20.14.0
, and npmv9
orv10
.
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:
- Log in to the Developer Portal.
- Navigate to the Your integrations page.
- Click Create an integration.
- 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.
- Select the checkbox to agree to the Canva Developer Terms.
- Click Create integration.
Step 2: Configure your Canva integration
Configure the integration's scope, secret, and authentication settings:
-
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.
-
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.
-
Under Authentication → Add Authentication, locate URL 1 and enter the following value:
http://127.0.0.1:3001/oauth/redirect -
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
Step 4: Install dependencies
Install the dependencies in the repository root:
cd canva-connect-api-starter-kitnpm 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_shopcode .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.
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:
- 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. - Click the Connect to Canva button and follow the prompts in the popup window.
- 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.
You can use this specification 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 templates and the autofill API.
- Learn about security practices for the Connect APIs.