---
title: "Format | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/design-editor/format/"
---

# 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.

```json
{
    "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`.

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

### Attributes

[Attributes](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/attributes.md) 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.

```json
{
  "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](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/dynamic-expressions.md). For example, if **Output Resolution** was defined, you can get this attribute value by name as follows:

```json
"{{ 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.

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