What are presets? Why create them?
This topic describes the different types of presets an extension can support and how they work.
These are some examples of apps with extensions that support presets:
Canva strives to make complex things simple. Presets accomplish this by empowering users to make beautiful designs with less effort.
Specifically, presets have the following benefits:
- Users can quickly apply visually appealing effects to their images.
- Users are already familiar with preset-like features (for example, Instagram filters).
- Users can see what an effect looks like before applying it.
Extensions with presets also receive more real estate in the Edit image panel, which makes it more likely for user to discover and engage with the extension.
There are two types of presets:
Simple presets apply a predefined effect to an image that can't be customized. It’s a binary choice: the effect is applied or it’s not.
Customizable presets apply a predefined effect that can be customized via the extension's control panel.
In general, creating simple presets is easier, but creating customizable presets makes them more useful to the widest range of users.
To learn how to create either type of preset, see the following topics:
Presets also fall into either of the following categories:
Static presets use static images for their thumbnails.
Dynamic presets generate thumbnails that demonstrate the preset's effect.
The process of creating each type of preset is a little different and those differences are explained throughout the documentation.
When a user selects an image and opens the Edit image panel, they see the presets of any connected (installed) extensions. Canva renders each preset as a labelled thumbnail.
When the user selects a preset, the extension applies an affect to their image. If the preset is customizable, they can open the preset’s control panel to adjust the settings of the preset.
When an extension supports more than four presets, the user can view additional presets by clicking See all. This view also displays a None preset that, when selected, removes any applied presets.
Static presets are defined in a JSON file. You can upload this file to the Developer Portal via the extension’s Assets field. Each preset has metadata, such as label and a thumbnail, that tells Canva how to render the preset in the side panel.
Dynamic presets are defined in the
When a user selects an image and opens the Edit image panel, Canva displays the extension's presets.
When a user selects a preset, Canva runs the
onReadycallback. This callback receives the ID of the selected preset. The extension must use this ID to apply the preset to the user’s image.
If the user selects another preset while the extension is still open, the
onReadycallback doesn’t run again. Instead, Canva calls the
onPresetSelectedcallback. This callback receives the ID of the selected preset. The extension must use this ID to apply the preset to the user’s image.
If the user selects a customizable preset, the extension must use the
updateControlPanelmethod to render rich controls. The user can use these controls to adjust the preset’s settings.