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/create-app 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.
Step 1: Install the DAM app
This step installs the DAM app and its dependencies in a new directory.
-
Use the following command to install and run @canva/create-app:
npx @canva/create-app@latestbash -
Use the arrow keys to select Digital Asset Management, then press enter.
-
The installation process guides you through the remaining settings:
- Enter your app's name.
- Choose whether to initialize a git repository for your project.
- Choose whether your project should use npm to install its dependencies.
After the installation process has completed, the output lists the steps for running the new app. For example:
cd example-dam-appnpm start
- Replace
example-dam-app
with your app's name.
Step 2: Create a new Canva app
Create a new Canva app in the Developer Portal. For more information, see Creating apps.
Step 3: Configure the environment file
Open the .env
file in your project's root directory and add your app's ID to the CANVA_APP_ID
setting. To find this value, open Your apps, find the app you created in step 2, and copy the ID from the App ID column.
CANVA_APP_ID=<your App ID>
Step 4: Preview your app
Run the app locally to see a preview.
-
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-appnpm startbash -
In Your apps, select your app, then Configure your app > App source > Development URL.
-
In the Development URL field, enter the URL of the Development URL (Frontend).
-
Click Preview. This opens a new tab in the Canva editor, with your app in the sidebar.
-
Click Open. This message only appears 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.
-
In your IDE, open the
canva-apps-sdk-starter-kit/examples/digital_asset_management/config.ts
file. -
In your IDE, open the
src/config.ts
file and changelabel: "Folders",
tolabel: "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 -
Save the changes to
config.ts
. -
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 JSON Web Tokens. For an example, see the authentication demo in thecanva-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.