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 DAM app that you can install and customize, using the @canva/cli⁠(opens in a new tab or window) command-line interface (CLI).

This article shows you how to install the example DAM app, run it locally on your machine, and start adding customizations.

1. Install the Canva CLI⁠(opens in a new tab or window) globally:

   npm install -g @canva/cli@latest

   SHELL

   Copy

2. Log in to the Canva CLI. This command opens an access request page in your browser:

   canva login

   SHELL

   Copy

3. Click Allow to grant the Canva CLI permission to manage your Canva apps.

4. Copy the confirmation code from your browser and paste it into the Canva CLI input.

5. Use the following command to create a new app using the DAM template:

   canva apps create --template "dam"

   BASH

   Copy

6. The setup process guides you through the remaining settings:

   1. Choose the audience your app.
   2. Enter a name for your app.
   3. Choose whether to initialize a git repository for your project.
   4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

cd example-dam-app
npm start

• Replace example-dam-app with your app's name.

Run the app locally to see a preview.

1. Navigate to your app's directory and start the app. The example-dam-app directory name will vary based on your app's name.

   cd example-dam-app
   npm start

   BASH

   Copy

2. In Your apps⁠(opens in a new tab or window), 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 using an app for the first time.

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 your IDE, open the src/config.ts file and 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",
         },
      },
   ],

   TYPESCRIPT

   Copy

3. Save the changes to config.ts.

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

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

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 JSON Web Tokens. For an example, see the authentication demo⁠(opens in a new tab or window) in the canva-apps-sdk-starter-kit repository.
• Manual: Alternatively, you can configure your app for manual authentication with a third-party platform.

To localize this template for all supported locales:

1. Ensure that the app has otherwise been localized in accordance with the recommended localization workflow.
2. Use the latest version of the @canva/app-components package.

The literal strings in the SearchableListView component will be localized automatically as long as your app follows the localization workflow and uses the latest version of @canva/app-components.

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