Canto App Documentation
Prerequisites
To utilize the Canto integration, ensure you have the following:
Contentstack Account: An active Contentstack account which is required to integrate with Canto.- Canto Account with Media Delivery Cloud: A Canto account together with the Media Delivery Cloud (MDC). The MDC allows for transformation and delivery of assets to your digital platforms.
Installing the App
Step 1. Install the Canto App
Search for ‘Canto’ in the Contentstack Marketplace and install the Canto App in any stack that you would like to associate with an organization in Canto.
Step 2. Configure the Canto App
After installing Canto in a stack you will need to configure authentication data from Canto.
In Canto you find the authentication data in Settings → Configuration Options → API → API Keys or by following the Canto tutorial on API key generation.
Important: On the API Key, the option Support Client Credentials Mode must be enabled. Open the key, click Edit, and tick the option. Without it, Canto rejects the app's token request and the asset picker shows an authentication error.
You do not need the access token that Canto offers to generate after enabling the option. The app requests and renews its own token from the App ID and App Secret. Only the API Key itself is required, and it does not expire.
)
Within Contentstack you have to configure the Canto App accordingly for every stack:
)
Don't forget to hit save!
Custom Field
Step 3. Add a custom field for the Canto App to a content type
Edit an existing content type or create a new content type in the stack where the Canto App is installed.
Add a field and select Custom from the new field options.
)
In the resulting pop up window choose ‘Select Extension/App’. Select ‘Canto’ from the following pop up window and select ‘Proceed’.
)
To restrict the types of assets available, open the Advanced tab and add the "allowedAssetTypes": [] config parameter, then add the desired types to the list. The possible types are "image", "video", "audio", "document" and "presentation".
Step 2. Create or edit an entry including a Canto App custom field
Entries that have the Canto custom field will look similar to the following.
)
Press the “Choose an Asset” button to select the asset
)
To change or delete the asset hover over the picture and press the two arrows to exchange the asset with another one or click the trashcan to delete the picture.
When the “Choose an Asset” or Exchange Button are pressed a modal will open that allows the selection of canto assets.
On the left side you can see a tree view of the folders and albums loaded from your Canto instance. Once you select any of the albums you will get an overview with all associated assets in this album.
)
Instead of clicking through folders and albums you can also use the search bar, which uses the Canto search functionality. The search results cover all albums in Canto:
)
Select on one of the assets and click save to persist your selection.
Richtext Plugin
Step 1. Add the plugin to the JSON Rich Text Field
Edit an existing content type or create a new content type in the stack where the Canto App is installed.
Add a field and select JSON Rich Text from the new field options.
)
In the resulting pop up window choose ‘Select JSON RTE Plugin(s)’. Select ‘Canto’ from the following pop up window and select ‘Add Plugin(s)’.
)
Step 2. Add or edit an asset directly in the Rich Text
To use a Canto asset in a JSON Rich Text Editor click the image symbol in the toolbar. This will open the same modal as the Custom Field.
)
To replace or delete an asset, hover over the image and use the toolbar that appears above it: click the two arrows to exchange the asset for another one, or the trash can to delete it.
To resize the asset, drag the handles at its edges. The aspect ratio is locked by default. To unlock it or to set the size manually, open the resize menu via the first icon in the same toolbar. With the aspect ratio unlocked, you can set width and height independently.
)
Serving assets in frontend applications
The Canto App for Contentstack provides seamless access to assets stored in Canto, ensuring they can be used effectively within frontend applications. The integration provides everything needed to serve assets via the Canto Media Delivery Cloud (MDC) instead of retrieving them directly from Canto, which optimizes asset delivery for performance and scalability.
When an asset is added to Contentstack via the Canto App, the stored data follows Canto's own schema: a curated slice of the raw payload kept in Canto's original names, nesting and types. This includes the metadata a frontend needs to reference the correct asset version without any direct Canto API call. The additional block carries the tenant's own custom fields and is passed through exactly as Canto delivers it. The RTE stores the same object plus one extra attribute for the display size an editor picked when resizing the asset inline:
customSizesRte?: {
width: string; // display width in px, e.g. "640"
height: string; // display height in px
locked: boolean; // aspect ratio follows the width
};This approach decouples frontend applications from direct dependencies on Canto while keeping asset delivery efficient, scalable and optimized. Developers can take the asset links straight from Contentstack into their frontend and benefit from the Media Delivery Cloud's capabilities without additional API requests to Canto.