Migrate a content extension

Content extensions are being deprecated in favor of the Canva Developers SDK. To help you migrate to the Developers SDK, Canva has created a template⁠(opens in a new tab or window) that demonstrates how to build a digital asset management (DAM) app.

As part of the migration process, you’ll need to configure CORS, remove signature verification, and add support for user authentication, among other steps.

To see how you can customize the app's UI, see the SearchableListView⁠(opens in a new tab or window) component.

Create a new app in the Developer Portal⁠(opens in a new tab or window). You'll use this app ID to configure your settings in the next steps. For more information, see Quickstart.

This step explains how to clone the example repository and install the npm dependencies.

1. Clone the canva-sdks/canva-apps-sdk-starter-kit⁠(opens in a new tab or window) repo.

   git clone git@github.com:canva-sdks/canva-apps-sdk-starter-kit.git

   BASH

   Copy

2. Install the npm dependencies.

   npm install

   BASH

   Copy

Open the .env file and add your backend server’s details. For more information, see Previewing apps.

CANVA_FRONTEND_PORT=8080
CANVA_BACKEND_PORT=3001
CANVA_BACKEND_HOST=https://my-backend/
CANVA_APP_ID=<your App ID>
CANVA_HMR_ENABLED=FALSE

• CANVA_BACKEND_HOST: The URL of your backend server.
• CANVA_APP_ID: To find this value, open Your apps⁠(opens in a new tab or window), find the app you created in step 1, and copy the ID from the App ID column.
• CANVA_HMR_ENABLED: You can optionally enable Hot Module Replacement (HMR). For more information, see Previewing apps

Run the app locally to preview your changes. For more information, see Previewing apps. If you haven’t already created an app, see Quickstart to create one.

1. Start the local preview:

   npm start:example digital_asset_management

   BASH

   Copy

Then preview the app from the Developer Portal, which opens the Canva editor in a new tab with a preview of your app in the sidebar. In Your apps⁠(opens in a new tab or window), select your app, then:

1. On the app's Inside Canva page, set Code upload > App source > Development URL to the address of your local development server.

   The URL must point directly to a standalone JavaScript file. This field exists only for development: you can't submit an app for review while it holds a value.

2. Click Preview.

   The app opens in a new tab. Apps use the Design Editor intent by default; if your app implements another intent, or more than one, choose which to preview under Preview options > Choose an intent, beside Preview.

3. The first time you open an app you have to connect it. Click Open, and the app loads in the iframe.

To preview your app with Safari, see Using HTTPS.

Configure your CORS header by applying the configuration at Cross-Origin Resource Sharing.

Update your app to add user authentication. Frictionless authentication is not available for this type of app, so you’ll need to use manual authentication with a third-party platform.

Update your legacy extension to remove the signature verification code. You can do this by removing the isValidPostRequest and isValidGetRequest steps. For more information, see Signature verification.

app.post("/content/resources/find", async (request, response) => {
-  if (!isValidPostRequest(process.env.CLIENT_SECRET, request)) {
-    response.sendStatus(401);
-    return;
-  }
  response.send({
    type: "SUCCESS",
    resources: [],
  });
});

Edit your config.ts⁠(opens in a new tab or window) to remove any configuration settings that you don't need. For more information, see the config settings in SearchableListView⁠(opens in a new tab or window).

• To organize your content for a Digital Asset Management (DAM) app, see the example app.
  • The DAM app template uses the SearchableListView component in the background to let users navigate your content using filters and search. You might want to use this component in your app directly.
  • To learn about the capabilities, see the SearchableListView⁠(opens in a new tab or window) storybook.
• When your app is ready, submit it on the Developer Portal. For more information, see Submitting apps.