Format

A Design Editor workflow is configured in a JSON file. A minimal file consists of an empty object that runs the editor with default settings. To change the editor's interface or rendering parameters, specify the editorConfig object. Additionally, you can include an attributes array to manage variable product parameters and a vars block to store data and settings.

{
    "editorConfig": {...},
    "attributes": [...],
    "vars": {...}
}

editorConfig

The editorConfig allows you to set up the editor in the same way as you would do for an on-premises instance of the Design Editor.

In the following example, we enable the advanced editing mode in the initialMode property, allow all the fonts in the fontList, display violation warnings and shadows on the canvas, and set up the violationWarningsSettings.

{
    "editorConfig": {
        "initialMode": "Advanced",
        "fontList": {
            "appFonts": ["*"]
        },
        "canvas": {
            "violationWarningButtonsEnabled": true,
            "shadowEnabled": true
        },
        "violationWarningsSettings": {
            "qualityMeter": {
                "enabled": true
            },
            "regionViolationWarningEnabled": true,
            "safetyLineViolationWarningEnabled": false,
            "textCropViolationWarningEnabled": true,
            "shapeViolationsEnabled": true
        }
    }
}

Attributes

Attributes allow you to add flexibility to your workflow by allowing users to select options for transfer and various integrations. You can use attributes to customize designs, change the user interface, and set rendering properties.

In the following example, the Design attribute is defined to select a template for your product. This design will be personalized by your customers.

{
  "attributes": [
    {
      "name": "Design",
      "label": "Design",
      "type": "single-asset",
      "assetType": "design",
      "description": "Choose a design associated with this product. Your design file can contain text, shapes, images, and backgrounds.",
      "validations": [
        {
          "type": "required",
          "message": "Choose a design which will be used as a template."
        }
      ]
    }
  ]
}

To use attribute values in workflow files, apply dynamic expressions. For example, if Output Resolution was defined, you can get this attribute value by name as follows:

"{{ product.attributes.find(x=>x.name==='Output Resolution').value}}"

Vars

You can assign attribute values to variables in the vars block to use this shortened form later.

{
  "vars": {
    "design": "{{product.attributes?.find(x=>x.name==='Design')?.value}}",
    ...
  }
}