Welcome to the Connect API starter kit for Canva's developers platform. ๐
This repo contains our openAPI specifications, as well as a demo ecommerce web application built with the Connect API. The complete documentation for the platform is at canva.dev/docs/connect.
- Node.js
v20.14.0
- npm
v9
orv10
Note: To make sure you're running the correct version of Node.js, we recommend using a version manager, such as nvm. The .nvmrc file in the root directory of this repo will ensure the correct version is used once you run nvm install
.
The Canva Connect API doesn't maintain nor publish client SDKs, however, we have made our OpenAPI spec publicly available, so you can use it with your favorite code generation library, such as openapi-generator to generate client SDKs in your language of choice!
To demonstrate this, we're using openapi-ts to generate TypeScript SDKs in client/ts which is used in our demo app.
Before you can run this demo, you'll need to do some setup beforehand.
-
Open the Developer Portal, and click
Create an integration
. -
Under
Configuration
โConfigure your integration
.
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, as you'll need it for a later step.
- Under
Scopes
โSet the scopes
, check the following boxes:
asset
: Read and Write.brandtemplate:content
: Read.brandtemplate:meta
: Read.design:content
: Read and Write.design:meta
: Read.profile
: Read.
- Under
Authentication
โAdd Authentication
, locateURL 1
and enter the following value:
http://127.0.0.1:3001/oauth/redirect
- Under
Return navigation
, toggle on theEnable return navigation
switch and enter the following as theReturn Url
:
http://127.0.0.1:3001/return-nav
- Install dependencies
npm install
cd demos/ecommerce_shop
- Add your integration settings to the
demos/ecommerce_shop/.env
file.
DATABASE_ENCRYPTION_KEY
: This will encrypt and decrypt the tokens stored in the JSON database. A key is automatically get generated for you after runningnpm install
, and will already be set in.env
. If not, runnpm start generate:db-key
from thedemos/ecommerce_shop
directory.CANVA_CLIENT_ID
: This is theClient ID
from the prerequisites.CANVA_CLIENT_SECRET
: This is theclient secret
you generated in the prerequisites.
- Run the app
npm start
Warning
Accessing the app via localhost:3000
will throw CORS errors, you must access the app via the below URL.
- View your app: http://127.0.0.1:3000
Before you can run this demo, you'll need to do some setup beforehand.
-
Open the Developer Portal, and click
Create an integration
. -
Under
Configuration
โConfigure your integration
.
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, as you'll need it for a later step.
- Under
Scopes
โSet the scopes
, select any permissions for endpoints you'd like to experiment with, plus the following:
profile
: Read.
- Under
Authentication
โAdd Authentication
, locateURL 1
and enter the following value:
http://127.0.0.1:3001/oauth/redirect
- Install dependencies
npm install
cd demos/playground
- Add your integration settings to the
demos/playground/.env
file.
DATABASE_ENCRYPTION_KEY
: This will encrypt and decrypt the tokens stored in the JSON database. A key is automatically get generated for you after runningnpm install
, and will aready be set in.env
.CANVA_CLIENT_ID
: This is theClient ID
from the prerequisites.CANVA_CLIENT_SECRET
: This is theclient secret
you generated in the prerequisites.
- Run the app
npm start
Warning
Accessing the app via localhost:3000
will throw CORS errors, you must access the app via the below URL.
- View your app: http://127.0.0.1:3000
We use Multer in our Express.js app to handle file uploads. It simplifies the process of uploading files and reduces the amount of code required. There are other alternatives to Multer
, like express-fileupload that you can use in your own application.
Canva Connect API - Getting Started Canva Connect API - Official Documentation