Presets

What are presets? Why create them?

You can configure an editing extension to support presets. A preset is a preconfigured effect that users can apply to their images in a single click.

Examples of editing extensions with presets

These are some examples of apps that support presets:

For more examples, refer to canva.com/apps.

Why support presets?

At Canva, we believe in making complex things simple. In pursuit of this goal, we've found that presets empower users to make beautiful designs with less effort.

Specifically, presets provide the following benefits:

  • Users can quickly apply visually appealing effects to their images.

  • Users are already familiar with preset-like functionality (e.g. Instagram filters).

  • Users can see an accurate preview of the effect(s) that will be applied. (This doesn't apply to all presets, as it's not always practical, but it's something we recommend.)

Extensions with presets also receive more real estate in the Effects panel, which can help increase the number of users regularly engaging with your app.

Types of presets

There are two types of presets:

  • Simple

  • Customizable

When a user selects a simple preset, they can't customize the behavior of the effect. It's a binary choice: the effect is either applied or it's not.

When a user selects a customizable preset, the user can select the preset again to open a control panel for the preset. This control panel allows them to adjust the settings of the preset.

In general, creating simple presets is easier than creating customizable presets, but where possible, we encourage developers to create customizable presets. This ensures that presets are loved by the widest range of users.

To learn how to create both types of presets, see:

Even when a preset is customizable, Canva still expects the default settings to produce a visually appealing effect.

How users experience presets

When a user selects an image and opens the Effects panel, they see the presets of any connected (installed) extensions. Each preset is shown as a labelled thumbnail.

When the user selects a preset, an effect is immediately applied to their image. If the preset is customizable, the user can choose to adjust the settings of the preset.

When an extension supports more than four presets, the user can access the additional presets by selecting See all. The view also displays a None preset for removing any applied presets from the image.

How presets work

When a user opens the Effects panel, Canva loads all extensions that support presets. Then, for each extension, Canva runs two callbacks: onReady and onPresetsRequest. The onPresetsRequest callback must return an array of presets for Canva to render in the Effects panel. Once the presets are rendered, Canva shuts down the extension.

When a user selects a preset, one of two things happen:

If the user starts the app by selecting a preset, Canva runs the onReady callback. This callback has access to the ID of the selected preset, which the extension must use to apply the preset to the user's image.

If the user selects a preset after opening the app, the onReady callback doesn't run again. Instead, Canva runs the onPresetSelected callback. This callback receives the ID of the preset, which the extension must use to apply the preset to the user's image.

If a user selects a customizable preset, an extension must call the updateControlPanel method to render rich controls for adjusting the preset's settings. These controls aren't displayed, however, unless the user reselects an already selected preset.