Digital Asset Management app

You can build a digital asset management (DAM) app that retrieves content from a backend and makes it available to a Canva app.

To help you get started, Canva has created a template in canva-sdks/canva-apps-sdk-starter-kit.

This article explains how to access the template, install dependencies, and start customizing your new app.

Step 1: Create a new app

Create a new app in the Developer Portal. For more information, see Creating apps.

Step 2: Clone the repo and install dependencies

1. Clone the canva-sdks/canva-apps-sdk-starter-kit repo.

   git clone [email protected]:canva-sdks/canva-apps-sdk-starter-kit.git

   bash

   Copy

2. Use npm to install the required packages:

   cd canva-apps-sdk-starter-kit
   npm install 
   cd examples/digital_asset_management
   npm install @canva/app-components@latest

   bash

   Copy

Step 3: Configure the environment

Open the .env file and add your CANVA_APP_ID. To find this value, open Your apps, find the app you created in step 1, and copy the ID from the App ID column.

CANVA_APP_ID=<your App ID>

Step 4: Preview your app

You run the app locally to get a preview of what it will look like.

1. In the canva-apps-sdk-starter-kit directory, run npm.

   npm start digital_asset_management

   bash

   Copy

2. In Your apps, select your app, then Configure your app > App source > Development URL.

3. In the Development URL field, enter the URL of the Development URL (Frontend).

4. Click Preview. This opens a new tab in the Canva editor, with your app in the sidebar.

5. Click Open. This message only appears when when using an app for the first time.

Step 5. Customize the DAM app

The example DAM app should now be running locally. In the preview, you can see tabs called All, Collection, and Assets. This procedure demonstrates how to rename a tab.

1. In your IDE, open the canva-apps-sdk-starter-kit/examples/digital_asset_management/config.ts file.

2. In config.ts, change label: "Folders", to label: "My Folders",

   containerTypes: [
      {
         value: "folder",
         label: "Folders",
         listingSurfaces: [
         { surface: "HOMEPAGE" },
         {
            surface: "CONTAINER",
            parentContainerTypes: ["folder"],
         },
         { surface: "SEARCH" },
         ],
         searchInsideContainer: {
         enabled: true,
         placeholder: "Search for resources inside this folder",
         },
      },
   ],

   Copy

3. Save the changes to config.ts.

4. Click ↻ to reload the app. The renamed tab should now be visible in the preview.

Step 6. Connect to a backend

To retrieve digital assets, connect the app to your backend. For more information, see Using a backend.

Step 7. Add user authentication

Update your app to add user authentication. You can use frictionless or manual authentication:

• Frictionless: To implement frictionless authentication, add App ID and JWT verification middleware to your app. This approach uses the auth.getCanvaUserToken() method to receive a JWT. For more information, see Verifying JWTs. For an example, see the authentication demo in the canva-apps-sdk-starter-kit repository.
• Manual: Alternatively, you can configure your app for manual authentication with a third-party platform.

Step 8: Customize your app

To customize the view, container type, layout, search, and more, see the SearchableListView component.

Next steps

Once your app is ready, submit it on the Developer Portal. For more information, see Submitting apps.