---
title: "Settings | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/settings/"
---

# Settings

> Settings consist of feature flags and configurations that alter the behavior of the Template Editor.

These settings are structured into sections, where each section controls a specific group of related properties, such as the toolbar, pages, or the editor's workspace.

Supported sections are listed below.

```json
{
    "settings": {
        "itemBuilder": { },
        "designViewer": { },
        "colorPicker": { },
        "pages": {
            "list": { },
            "properties": { }
        },
        "printAreas": { },
        "layers": { },
        "itemProperties": { },
        "toolbar": { },
        "editorSettings": { },
        "itemValidation": { },
        "listSettings": { },
        "snapLines": {}
    }
}
```

Let's take a closer look at these settings.

## itemBuilder

The `itemBuilder` object allows you to define the initial properties of objects to be created in the editor. This object is defined by using the [`IItemData` interfaces](https://customerscanvas.com/docs/hub/dev-center/scenarios/direct-mail/specifying-personalization-data.md#itemsdata). You can set initial properties for the following design element types:

- `text`
- `rectangle`
- `ellipse`
- `image`
- `barcode`
- `qrCode`

For example, this is how you can change default settings for text, ellipses, and images.

```json
{
    "itemBuilder": {
        "text": { "isVertical": true },
        "ellipse": { "fillColor": "rgb(255, 100, 13)" },
        "image": { "borderWidth": 10, "borderColor": "rgb(255, 0, 13)" }
    }
}
```

## designViewer

The `designViewer` object manages the user's interaction with the work area, where they manipulate design elements.

The following example changes the units to inches, enables the grid with a step of 0.5 points, and hides the rulers.

```json
{
    "designViewer": {
      "unit": "in",
      "grid": { "step": 0.5, "gridEnabled": true },
      "rulers": { "enable": false }
    }
}
```

In the `grid` object, the `step` is measured in points (1/72 inch).

## colorPicker

The `colorPicker` object configures the color picker and the color palette.

In the `picker` object, you can configure the color picker behavior:

- `defaultColorSpace` – the color space selected by default, either `"rgb"` or `"cmyk"`. Default: `"cmyk"`.
- `eyeDropperEnabled` – if `true`, enables the eyedropper tool.
- `decimalCmykEnabled` – if `true`, allows fractional CMYK values.
- `alphaEnabled` – if `true`, enables the transparency (alpha channel) selection.
- `colorSelector` – the type of the color selector, either `"hsv"` or `"none"`.
- `colorInput` – the color input format, one of `"hex"`, `"input"`, or `"sliders"`.

In the `palette` object, you can configure the palette sections:

- `document` – if `true`, displays the document colors section. Default: `false`.
- `user` – if `true`, displays the user colors section. Default: `false`.
- `default` – if `true`, displays the default colors. Default: `true`.
- `recommended` – if `true`, displays the recommended colors. Default: `false`.
- `noColor` – if `true`, displays the document `No color` section. Default: `true`.

For example, to open the color picker in the RGB color space with the document and user colors on the palette, use:

```json
{
    "colorPicker": {
        "picker": { "defaultColorSpace": "rgb" },
        "palette": { "document": true, "user": true }
    }
}
```

## printAreas

The `printAreas` object configures the display of print areas in the editor. The `mode` property is one of `"off"` (default), `"single"`, or `"multiply"`.

```json
{
    "printAreas": { "mode": "single" }
}
```

## layers

The `layers.limited.enabled` property enables the limited layers mode. When it is `true`, the editor converts containers when loading a design. Default: `false`.

```json
{
    "layers": { "limited": { "enabled": true } }
}
```

## pages

This object allows for changing the settings of the **Page** panel and the **Pages** list:

- `pages.properties`
- `pages.list`

### pages.properties

The `pages.properties` object defines which page settings can be edited:

- `pageProperties` allows/disallows editing the page size.
- `areas` allows/disallows editing page areas.
- `background` allows/disallows editing the background of the page.

To disable editing and only display the settings, set their `readonly` property to `true`. For example, to disable changing all these page properties, use:

```json
{
    "pages": {
        "properties": {
            "pageProperties": { "readonly": true },
            "areas": { "readonly": true },
            "background": { "readonly": true }
        }
    }
}
```

### pages.list

The `pages.list` object allows you to customize the behavior of the **Pages** list.

There are two objects to configure:

- `createOrRemove` allows you to disable creating and deleting the pages. If its property `enabled` set to `false`, it hides the **Create** button and disables the context menu for the **Pages** list.
- `changeOrder` allows you to disable changing the order of pages using D&D. To do so, set its `enabled` property to `false`.

To disable adding, removing, and changing the page order, use:

```json
{
    "pages": {
        "list": {
            "createOrRemove": { "enabled": false },
            "changeOrder": { "enabled": false }
        }
    }
}
```

## itemProperties

The `itemProperties` object allows you to change the appearance of object property groups in the editor.

The following property groups can be disabled:

- `fill` – fill and stroke colors
- `border` – border (stroke) settings
- `blending` – blending mode and opacity
- `wrapping` – text wrapping
- `effects` – item effects
- `overprint` – overprint settings
- `nameAndTitle` – the item name
- `placeholder` – placeholder settings
- `toggleSet` – properties used by the toggle set functionality
- `general` – permission properties for the target editors
- `data` – properties used by the VDP functionality
- `violation` – violation warnings

To hide these property groups, use:

```json
{
    "itemProperties": {
        "data": false,
        "toggleSet": false,
        "general": false
    }
}
```

## toolbar

The `toolbar` object allows you to configure buttons for creating design elements.

You can add buttons so that the user can create:

- `text`
- `image`
- `rectangle`
- `ellipse`
- `barcode`
- `qrCode`

To hide the buttons, use

```json
{
    "toolbar": {
        "barcode": { "enabled": false },
        "qrCode": { "enabled": false },
        "rectangle": { "enabled": false },
        "ellipse": { "enabled": false },
        "text": { "enabled": false },
        "image": { "enabled": false }
    }
}
```

## editorSettings

This object enables the Editor settings button. To disable this button, set enabled to false.

To hide the button, use:

```json
{
    "editorSettings": { "enabled": false }
}
```

## itemValidation

The `itemValidation` object configures the validation rules for items in the design. For the description of the preflight check and monitored violations in Customer's Canvas, refer to the [Validation Warnings](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/design-editor/warnings.md) topic.

Validation rules can be divided into three groups:

- [Design areas and text](#design-areas-and-text)
- [Safety lines](#safety-lines)
- [Image resolution](#image-resolution)

### Design areas and text

The `itemValidation.violation` object configures the design validation in the Template Editor:

- `region` enables the region validation.
- `bleed` enables the bleed zone validation.
- `textCrop` enables checking that all text fits.
- `inPlaceNotSupported` enables checking text elements for WYSIWYG mode support.

To disable checking unsupported text properties, use:

```json
{
    "itemValidation": {
        "violation": {
            "inPlaceNotSupported": false
        }
    }
}
```

### Safety lines

Safety line validation is controlled by the group of the following properties:

- `safetyLine` enables the safety line validation.
- `safetyLines` is one of `"InsideAll"` | `"PartiallyInsideAny"` | `"InsideAny"` | `"Disabled"`. For more details, refer to the [Validation Warnings](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/design-editor/warnings.md#violation-warnings) topic.
- `tolerance` is the distance that allows you to suppress warnings about violations of safety lines or the bleed zone when an object is close enough to them.

To check if the elements are inside all the safety lines with acceptable tolerance, use:

```json
{
    "itemValidation": {
        "violation": {
            "safetyLine": true,
            "safetyLines": "InsideAll",
            "tolerance": 0.1
        }
    }
}
```

### Image resolution

Image resolution is controlled by the properties of the `itemValidation.qualityMeter` object:

- `targetResolution` – the DPI of the print files.
- `enabled` – if `true`, displays the quality meter.
- `warning` – the percentage of `targetResolution` that defines the acceptable quality level.
- `bad` – the percentage of `targetResolution` that defines the unacceptable quality level.
- `qualityChangeContainersEnabled` – if `true`, displays the DPI bar.

For example, to check the image resolution with a target value of 200 DPI and display warnings at 160 DPI and errors at 100 DPI, use:

```json
{
    "itemValidation": {
        "qualityMeter": {
            "enabled": true,
            "targetResolution": 200,
            "warning": 80,
            "bad": 50
        }
    }
}
```

Here, the `targetResolution` specifies a DPI of the print files, and the `bad` and `warning` properties specify two image quality levels as a percentage of `targetResolution`. In this example, a DPI lower than `100` will be considered bad, a DPI from `100` through `160` will display a warning, and a DPI higher than `160` will be considered acceptable.

## listSettings

For the description of the list settings in Customer's Canvas, refer to the [Configuring lists](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/design-editor/lists.md#configuring-lists) topic.

- `bulletChar` – the symbol
- `firstLineIndent` – the first line indent
- `levelIndent` – a new level indent
- `listIndent` – the entire list indent
- `maxLevel` – the number of nested levels
- `numberingFormat` – the format, one of `"number"`, `"lowerLetter"`, `"upperLetter"`, `"lowerRoman"`, `"upperRoman"`, `"none"`.
- `tabOffset` – the distance between the bullet and the first letter.

For example, this is how you can limit the list to a single level and customize the bullet points.

```json
{
    "listSettings": {
        "maxLevel": 1,
        "bulletChar": "*"
    }
}
```

## snapLines

The `snapLines` object allows you to define which elements the snap line should cling to.

- `snapToItems` enables snapping to design elements.
- `snapToLockedItems` enables snapping to locked design elements.
- `snapToPage` enables snapping to page bounds.
- `snapToGrid` enables snapping to grid cells.
- `snapToRegion` enables snapping to regions.
- `snapToSafetyLines` enables snapping to safety lines.

For example, this is how you can disable snapping to locked design elements.

```json
{
    "snapLines": {
        "snapToLockedItems": { "enabled": false }
    }
}
```