Presets JSON

If you're creating an editing extension that supports static presets, you must create a Presets JSON file and upload it to the Developer Portal.
A Presets JSON file is a JSON file that defines the extension's presets. Canva uses this file to render the presets in the Edit image panel.
This topic explains how to create a Presets JSON file.
Step 1: Create a JSON file
To begin, create a JSON file:
touch presets.json
This file must be named presets.json.
Step 2: Create the presets
In the JSON file, create an array:
[]
Then, for each preset that the extension supports, add an object to this array.
Each object must have the following properties:
Name
Type
Required
Description
id
string
Yes
A unique ID for the preset.
label
string
Yes
A human readable label for the preset or the key of a localized label.
asset
string
Yes
The file name of an asset uploaded to the extension’s Assets field. Canva uses this asset as the preset’s thumbnail.
kind
string
No
The type of preset. The accepted values are ”simple” or ”customizable”. The default value is "customizable”.
category
string
No
A human readable label for a preset’s category or the key of a localized label.
The following snippet demonstrates the configuration of three presets:
[
  {
    "id": "invert",
    "label": "Invert",
    "asset": "invert.png"
  },
  {
    "id": "grayscale",
    "label": "Grayscale",
    "asset": "grayscale.png"
  },
  {
    "id": "sepia",
    "label": "Sepia",
    "asset": "sepia.png"
  }
]
(Optional) Step 3: Validate the JSON file
To avoid runtime errors, validate the JSON before uploading it to the Developer Portal.
To validate the JSON, follow these steps:
1.Navigate to jsonschema.dev/s/z7ge9.
2.Enter the JSON into the JSON instance field.
You can also use the following JSON Schema to validate the file as part of the development loop:
{
  "type": "array",
  "uniqueItems": true,
  "items": {
    "properties": {
      "id": {
        "type": "string",
        "description": "A unique ID for the preset."
      },
      "label": {
        "type": "string",
        "description": "A human readable label for the preset or the key of a localized label.."
      },
      "asset": {
        "type": "string",
        "description": "The file name of an asset uploaded to the extension’s 'Assets' field. Canva uses this asset as the preset’s thumbnail."
      },
      "kind": {
        "type": "string",
        "description": "The type of preset. The default value is 'customizable'.",
        "enum": ["simple", "customizable"],
        "default": "customizable"
      },
      "category": {
        "type": "string",
        "description": "A human readable label for a preset's category or the key of a localized label."
      }
    },
    "required": ["id", "label", "asset"],
    "additionalProperties": false
  }
}
Step 4: Disable dynamic presets
If an extension supports dynamic presets, Canva ignores the Presets JSON file, so if the extension's Use dynamic presets option is enabled, disable it.
Step 5: Upload the JSON file
1.Navigate to an app via the Developer Portal.
2.From the Extensions page, expand the Editing panel.
3.Upload the JSON file to the Assets field.
Example
[
  {
    "id": "invert",
    "label": "Invert",
    "asset": "invert.png"
  },
  {
    "id": "grayscale",
    "label": "Grayscale",
    "asset": "grayscale.png"
  },
  {
    "id": "sepia",
    "label": "Sepia",
    "asset": "sepia.png"
  }
]

Name	Type	Required	Description
`id`	string	Yes	A unique ID for the preset.
`label`	string	Yes	A human readable label for the preset or the `key` of a localized label.
`asset`	string	Yes	The file name of an asset uploaded to the extension’s Assets field. Canva uses this asset as the preset’s thumbnail.
`kind`	string	No	The type of preset. The accepted values are `”simple”` or `”customizable”`. The default value is `"customizable”`.
`category`	string	No	A human readable label for a preset’s category or the `key` of a localized label.

Preset categories

Touch mode

Last modified 1yr ago