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.
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.
Run an initial install to set up Open API:
npm install
To regenerate the types, simply run:
npm run generate
- 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
.
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
- Install dependencies
cd demos/ecommerce_shop
npm install
- Add your integration settings to the
demos/ecommerce_shop/.env
file.
CANVA_CLIENT_ID
: This is theClient ID
from the prerequisites.CANVA_CLIENT_SECRET
: This is theclient secret
you generated in the prerequisites.DATABASE_ENCRYPTION_KEY
: This will be used to encrypt and decrypt the tokens stored in the JSON database. You can generate one withgenerate:db-key
.
- 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