Presets
What are presets? Why create them?
You can configure an editing extension to support presets. A preset is a predefined effect that users can apply to an image in a single click.
This topic describes the different types of presets an extension can support and how they work.

Examples

These are some examples of apps with extensions that support presets:
To find more examples, see canva.com/apps.

Benefits of 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.

Types of presets

There are two types of presets:
  • Simple
  • Customizable
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:

Dynamic vs. static presets

Presets also fall into either of the following categories:
  • Dynamic
  • Static
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.

How users experience presets

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.

How presets work

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 onPresetsRequest callback.
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 onReady callback. 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 onReady callback doesn’t run again. Instead, Canva calls the onPresetSelected callback. 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 updateControlPanel method to render rich controls. The user can use these controls to adjust the preset’s settings.
Last modified 1mo ago