After setting up the starter kit, the next step is to preview your app in the Canva editor — and, ideally, preview it at regular intervals.
There are two ways to do this:
- Load the app from a local development server.
It'd be tedious to generate and upload a bundle after every change, so the first option is intended for when you're ready to submit the app for review. To learn more, see Bundling apps.
The second option is ideal during development as it offers the fastest development loop.
Step 1: Start the local development server
The starter kit contains webpack configuration for starting a local development server. This server exposes the app's source code via a URL that can be shared with Canva.
To start the local development server:
Navigate into the starter kit:cd canva-apps-sdk-starter-kit
Run the following command:npm run start
The local server will become available at http://localhost:8080. If you navigate to this URL, you should see the app's (minified) source code.
By default, the development server does not use the HTTPS protocol. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.
If you're using Safari (or otherwise need to use HTTPS):
Start the development server with the
--use-httpsflag:npm run start --use-https
Navigate to https://localhost:8080.
Bypass the invalid security certificate warning:
- Click Show details.
- Click Visit website.
You'll need to bypass the invalid security certificate warning every time you start the server.
Step 2: Configure the Development URL
In the Developer Portal, set the App source > Development URL field to the URL of the local development server. This field tells Canva to load the app's source code from the specified URL.
Step 3: Preview the app
In the Developer Portal, click the Preview button.
This will open the app in a new tab.
The first time you open an app, it must be connected (installed). To do this, click the Use button. The app will then load within the iframe.
Reloading the app
If you make a change to the app — for example, by editing the
src/app.tsx file — that change is not immediately reflected in the app's iframe. You need to reload the app to preview the changes.
You can reload an app manually or automatically as the code changes.
To manually reload the app, do any of the following:
Click the Reload button in the app's header.
Return to the Developer Portal and click the Preview button.
Right-click in the app's iframe and select Reload frame.
Close and re-open the app in the Canva editor.
The most efficient way to preview changes is with Hot Module Replacement (HMR). This is a feature of webpack that will automatically reload the app whenever the source code changes.
To enable HMR:
Navigate to the Your apps page.
Copy the ID of the app from the App ID column.
In the starter kit's directory, open the
CANVA_APP_IDenvironment variable to the ID of the app:CANVA_APP_ID=# YOUR_APP_ID_GOES_HERE
CANVA_HMR_ENABLEDenvironment variable to
Restart the local development server.
Reload the app manually to ensure that HMR takes effect.
All changes to the source code will automatically be reflected in the app's iframe.
Previewing apps via the desktop app
Although Canva has a desktop app, we recommend previewing apps via the web browser. Previewing apps via the desktop app requires a self-signed SSL certificate, which requires extra work without any meaningful benefit and is not something we actively support.
Previewing apps on mobile devices
Canva is extremely popular on mobile devices, so it's important to preview and test your app on them. The local development server on your computer won't be accessible via a mobile device though, so you'll need to use either of the following workarounds:
- Use ngrok to make the local development server available to the public internet and change your app's Development URL field to the ngrok-generated URL.
- You can't preview an app outside of the Canva editor. This is because the Apps SDK must be able to send and receive messages to and from the editor.
Once you have an app up and running in the Canva editor, you can start writing code that hooks into the APIs that Canva exposes. To learn how, see Integrating with Canva.