Quick start
Canva's app development platform lets anyone create apps that add features to Canva. This quick start guide explains how to get an app up and running in a matter of minutes.
Before you begin
To follow this guide, you'll need to:
- Sign up for a Canva.com account.
- Install git, Node.js v18, and npm v9.
- Learn the fundamentals of TypeScript, React, and webpack.
If you need help with any of these prerequisites, including how to set up the required tooling, see Prerequisites.
Step 1: Create an app via the Developer Portal
-
Log in to the Developer Portal
-
Navigate to the Your apps page.
-
Click Create an app.
-
Select a target audience for the app:
- Public: You can make your app available to all of Canva's users, but the app will need to be reviewed by Canva and meet the requirements outlined in the submission checklist.
- Restrict to your team: The app can only be made available to members of the current team and the team's administrators are responsible for reviewing it.
-
Agree to the terms and conditions.
-
Click Create.
Step 2: Set up the starter kit
-
Clone the following repo:
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.gitbashThis repo contains the starter kit for the Apps SDK. The starter kit is a boilerplate for an app and all of the tooling we recommend. To learn more the starter kit, see Setting up the starter kit.
-
Navigate into the cloned directory for the starter kit:
cd canva-apps-sdk-starter-kitbash -
Install the dependencies:
npm installbash -
Start the local development server:
npm run startbashThe local development server will become available at http://localhost:8080.
Step 3: Preview the app
- In the Developer Portal, navigate to the app’s Configure your app page.
- Select App source > Development URL.
- In the Development URL field, enter the URL of the development server.
- To open the app in a new tab, click Preview.
- To install the app, click Open.
Next steps
Now that your app is up and running, the next step is to start developing it:
- To jump straight into the code, start editing the
src/app.tsx
file. - To learn more about the Apps SDK, see Integrating with Canva.