---
title: "Editor config reference | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/reference/"
---

# Editor config reference

> This topic describes all the parameters that allows you to configure the Design Editor. These parameters are represented in the same way as they defined in the **~/Configuration/clientConfig.json** file. For an alternative description, you can refer to the [JS API reference](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference.md).

:::note
The default measurement units in the Design Editor are points. If a parameter accepts other units, then the unit name is specified in the parameter name, for example, `lineWidthPx` accepts pixels. The unit shortcuts are `px` for pixels, `pct` for percents, etc.

Parameter names are case sensitive.
:::

You can click a parameter name to get its description.

<pre><code>{`{
    "`}<a href="#spellCheckEnabled" title="Enables spell checking.">spellCheckEnabled</a>{`": true,
    "`}<a href="#initialMode" title="The initial mode of the web-to-print editor.">initialMode</a>{`": "Simple",
    "`}<a href="#fontList" title="Fonts available in the editor.">fontList</a>{`": { "appFonts": ["*"] },
    "`}<a href="#fontListMode" title="The font list mode.">fontListMode</a>{`": "Advanced",
    "`}<a href="#assetSources" title="Configuration of asset sources available in the Asset Manager.">assetSources</a>{`": { ... },
    "`}<a href="#defaultLanguage" title="The default interface language.">defaultLanguage</a>{`": "en",
    "`}<a href="#loadUserInfoButtonEnabled" title="Displays the Load my info button.">loadUserInfoButtonEnabled</a>{`": false,
    "`}<a href="#autoLoadUserInfo" title="If true, the product is automatically populated with predefined data.">autoLoadUserInfo</a>{`": true,
    "`}<a href="#createGroupsAs" title="The group type to create.">createGroupsAs</a>{`": "smart",
    "`}<a href="#autoImageUploadModeEnabled" title="Enables a dialog box for uploading private images into placeholders.">autoImageUploadModeEnabled</a>{`": false,
    "`}<a href="#revertProductConfirmationEnabled" title="Enables the confirmation when reverting a product.">revertProductConfirmationEnabled</a>{`": true,
    "`}<a href="#imageEditorEnabled" title="Enables the Image Editor.">imageEditorEnabled</a>{`": true,
    "`}<a href="#deleteItemConfirmationEnabled" title="Enables the confirmation when deleting an item.">deleteItemConfirmationEnabled</a>{`": true,
    "`}<a href="#restoreProductOnReloadEnabled" title="Enables restoring a product state.">restoreProductOnReloadEnabled</a>{`": false,
    "`}<a href="#alignToSafetyLineName" title="The name of a safety line to which an item will be aligned.">alignToSafetyLineName</a>{`": "bleed",
    "`}<a href="#variableItemsMaskSymbol" title="A symbol marking design elements as variable items.">variableItemsMaskSymbol</a>{`": "%",
    "`}<a href="#canvasOnlyMode" title="Hides all interface elements but the canvas.">canvasOnlyMode</a>{`": false,
    "`}<a href="#defaultProductTheme" title="The default color theme.">defaultProductTheme</a>{`": "",
    "`}<a href="#productThemes" title="The color sets defining a theme.">productThemes</a>{`": null,
    "`}<a href="#themeConfiguration" title="The primary color and an image for the preloader.">themeConfiguration</a>{`": null,
    "`}<a href="#variableTokens" title="A list of tokens available for insertion into text.">variableTokens</a>{`": null,
    "`}<a href="#canvas" title="Canvas properties.">canvas</a>{`": {
        "`}<a href="#canvasColor" title="The canvas color.">color</a>{`": "#fff",
        "`}<a href="#shadowEnabled" title="Enables the canvas shadow.">shadowEnabled</a>{`": false,
        "`}<a href="#paddingPct" title="Padding in percent.">paddingPct</a>{`": 5,
        "`}<a href="#maskedPlaceholderUnderscoreEnabled" title="Enables displaying underscores in blank masked text layers.">maskedPlaceholderUnderscoreEnabled</a>{`": true,
        "`}<a href="#suppressOutOfRegionManipulation" title="Disallows for dragging elements out of a region.">suppressOutOfRegionManipulation</a>{`": true,
        "`}<a href="#violationWarningButtonsEnabled" title="Enables preflight warnings.">violationWarningButtonsEnabled</a>{`": true,
        "`}<a href="#qualityChangeContainersEnabled" title="Enables the DPI bar when resizing images.">qualityChangeContainersEnabled</a>{`": true,
        "`}<a href="#floatingItemToolbarEnabled" title="Enables the floating toolbar for design elements.">floatingItemToolbar<wbr/>Enabled</a>{`": true,
        "`}<a href="#autoItemSelectionEnabled" title="Allows for auto selecting the first design element.">autoItem<wbr/>Selection<wbr/>Enabled</a>{`": true,
        "`}<a href="#autoPlaceholderEditModeEnabled" title="Enables the auto edit mode for the content of image placeholders.">autoPlaceholder<wbr/>EditMode<wbr/>Enabled</a>{`": false,
        "`}<a href="#gridVisible" title="Displays the grid when the canvas opens.">gridVisible</a>{`": false,
        "`}<a href="#safetyLinesVisible" title="Displays safety lines when the canvas opens.">safetyLinesVisible</a>{`": true,
        "`}<a href="#snapLinesVisible" title="Displays snap lines when the canvas opens.">snapLinesVisible</a>{`": true,
        "`}<a href="#canvasItemHoverEnabled" title="Enables text labels for design elements.">canvasItemHoverEnabled</a>{`": false,
        "`}<a href="#historySize" title="The number of actions that the user can revert.">historySize</a>{`": 10,
        "`}<a href="#pinchZoomEnabled" title="Allows users to zoom the canvas using pinch.">pinchZoomEnabled</a>{`": true,
        "`}<a href="#textEditor" title="The text editor mode.">textEditor</a>{`": "default",
        "`}<a href="#curvedTextBaselineDrawStates" title="Specifies how to draw baseline of curved text.">curvedTextBaselineDrawStates</a>{`": ["edit", "select", "hover", "move", "rotate", "resize"],
        "`}<a href="#rotatedTextInPlaceEditEnabled" title="Enables editing the rotated text elements in popup boxes.">rotatedTextInPlaceEditEnabled</a>{`": true,
        "`}<a href="#inactiveContainerTransparencyEnabled" title="Displays inactive spot containers transparent.">inactiveContainerTransparencyEnabled</a>{`": true,
        "`}<a href="#inactiveContainerTransparencyLevel" title="Defines how transparent inactive containers should be.">inactiveContainerTransparencyLevel</a>{`": 0.8,
        "`}<a href="#scrollbarEnabled" title="Enables scrollbars when the design does not fit the canvas at the selected zoom level.">scrollbarEnabled</a>{`": false,
        "`}<a href="#canvas-zoom" title="Canvas zoom parameters.">zoom</a>{`": {
            "`}<a href="#minZoom" title="The minimum zoom of the canvas.">min</a>{`": 0.01,
            "`}<a href="#maxZoom" title="The maximum zoom of the canvas.">max</a>{`": 16,
            "`}<a href="#stepZoom" title="The step to change the zoom of the canvas.">step</a>{`": 0.25
        },
        "`}<a href="#rulers" title="Settings of canvas rulers.">rulers</a>{`": {
            "`}<a href="#rulersEnabled" title="Displays the rulers.">enabled</a>{`": true,
            "`}<a href="#rulersUnit" title="The ruler measurement unit.">unit</a>{`": "inch",
            "`}<a href="#customUnitScale" title="The ratio of the custom unit to points.">customUnitScale</a>{`": "1",
            "`}<a href="#rulersOrigin" title="The point of origin relative to the upper-left corner of the design.">origin</a>{`": "{ "X": 0, "Y": 0 }"
        },
        "`}<a href="#canvas-rotation" title="Canvas rotation parameters.">rotation</a>{`": {
            "`}<a href="#rotationType" title="The canvas rotation angle.">type</a>{`": "Rotate90"
        },
        "`}<a href="#snap-lines" title="Properties of snap lines.">snapLines</a>{`": {
            "`}<a href="#snapLinesItems" title="The type of snap lines, items.">items</a>{`": {
                "`}<a href="#snapLinesEnabled" title="Displays snap lines of this type.">enabled</a>{`": true,
                "`}<a href="#snapLinesColor" title="The color of snap lines.">color</a>{`": "rgb(255,0,255)",
                "`}<a href="#tolerance" title="The distance between an object and a snap line.">tolerance</a>{`": 5,
                "`}<a href="#snapLinesPriority" title="The priority of these snap lines.">priority</a>{`": 0,
                "`}<a href="#snapLinesIncludeLocked" title="Defines whether to align snap lines to locked items or not.">includeLocked</a>{`": false
            }
        },
        "`}<a href="#bleed-and-trim-lines" title="Properties of bleed lines.">printZone</a>{`": {
            "`}<a href="#printZoneItems" title="Either bleed or trim.">bleed</a>{`": {
                "`}<a href="#printZoneItemColor" title="The color of bleed lines.">color</a>{`": "rgba(255,0,0,1)",
                "`}<a href="#printZoneItemAltColor" title="The alt color of bleed lines.">altColor</a>{`": "rgba(255,0,0,0)",
                "`}<a href="#printZoneItemStep" title="The step of dashed lines.">step</a>{`": 5,
                "`}<a href="#printZoneItemWidth" title="The width of bleed lines.">width</a>{`": 1
            }
        },
        "`}<a href="#item-processing-rules" title="Rules for processing items on the canvas.">handlers</a>{`": {
            "`}<a href="#placeholderEditingViewMode" title="Defines how the product will appear when editing placeholders.">placeholderEditingViewMode</a>{`": "overlay",
            "`}<a href="#placeholderCropMode" title="Adobe Express-like cropping mode">placeholderCropMode</a>{`": true,
            "`}<a href="#placeholderFitMode" title="Fit mode compatibility with 7.1.54.">placeholderFitMode</a>{`": "Always",
            "`}<a href="#imageMinDpi" title="Defines the minimum allowable DPI that can be achieved when resizing images.">imageMinDpi</a>{`": "",
            "`}<a href="#resizeLimits" title="Defines the smallest size to which items on the canvas can be downsized.">resizeLimits</a>{`": {
                "`}<a href="#resizeLimitsCommon" title="The common size limit applicable to all items.">common</a>{`": { "width": null, "height": null}
            }
        },
        "`}<a href="#text-lists" title="Layout settings and format of text lists.">listSettings</a>{`": {
            "`}<a href="#maxLevel" title="The maximum number of levels in multilevel lists.">maxLevel</a>{`": 3,
            "`}<a href="#listFirstLineIndent" title="The distance between the bullet and text of the first line.">firstLineIndent</a>{`": -20,
            "`}<a href="#listIndent" title="The distance to the text in the leftmost line of list items.">listIndent</a>{`": 30,
            "`}<a href="#levelIndent" title="The offset of list levels.">levelIndent</a>{`": 40,
            "`}<a href="#tabOffset" title="The offset of the first line text when it overlays the bullet.">tabOffset</a>{`": 10,
            "`}<a href="#numberingFormat" title="The numbered list marker format.">numberingFormat</a>{`": "number",
            "`}<a href="#bulletChar" title="The bulleted list marker.">bulletChar</a>{`": "•"
        }
    },
    "`}<a href="#default-item-parameters" title="Properties of design elements being added to a product.">defaultItemsConfig</a>{`": {
        "`}<a href="#barcodeDefault" title="Default parameters of barcodes.">barcode</a>{`": null,
        "`}<a href="#ellipseDefault" title="Default parameters of ellipses.">ellipse</a>{`": null,
        "`}<a href="#imageDefault" title="Default parameters of images.">image</a>{`": null,
        "`}<a href="#lineDefault" title="Default parameters of lines.">line</a>{`": null,
        "`}<a href="#placeholderDefault" title="Default parameters of placeholders.">placeholder</a>{`": null,
        "`}<a href="#rectangleDefault" title="Default parameters of rectangles.">rectangle</a>{`": null,
        "`}<a href="#richTextDefault" title="Default parameters of rich texts.">richText</a>{`": null,
        "`}<a href="#shapeDefault" title="Default parameters of shapes.">shape</a>{`": null,
        "`}<a href="#textDefault" title="Default parameters of texts.">text</a>{`": null,
        "`}<a href="#groupDefault" title="Default parameters of groups.">group</a>{`": null,
        "`}<a href="#clipartDefault" title="Default parameters of clipart.">clipart</a>{`": null
    },
    "`}<a href="#grid" title="Grid properties.">grid</a>{`": {
        "`}<a href="#gridEnabled" title="Enables the grid.">enabled</a>{`": true,
        "`}<a href="#horizontalColor" title="The color of the horizontal grid lines.">horizontalColor</a>{`": "rgba(0, 255, 255, 0.2)",
        "`}<a href="#verticalColor" title="The color of the vertical grid lines.">verticalColor</a>{`": "rgba(0, 255, 255, 0.2)",
        "`}<a href="#stepX" title="The distance between vertical grid lines.">stepX</a>{`": 0.25,
        "`}<a href="#stepY" title="The distance between horizontal grid lines.">stepY</a>{`": 0.25,
        "`}<a href="#lineWidthPx" title="The width of grid lines in pixels.">lineWidthPx</a>{`": 1
    },
    "`}<a href="#rendering" title="Rendering settings.">rendering</a>{`": {
        "`}<a href="#hiResOutputDpi" title="Hi-res output resolution in DPI.">hiResOutputDpi</a>{`": 300,
        "`}<a href="#hiResOutputFileFormat" title="The type of the hi-res output.">hiResOutputFileFormat</a>{`": "pdf",
        "`}<a href="#hiResOutputColorSpace" title="The color space of the hi-res output.">hiResOutputColorSpace</a>{`": "cmyk",
        "`}<a href="#hiResOutputRgbColorProfileName" title="The name of an RGB color profile.">hiResOutputRgbColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputCmykColorProfileName" title="The name of an CMYK color profile.">hiResOutputCmykColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputGrayscaleColorProfileName" title="The name of a color profile for grayscale outputs.">hiResOutputGrayscaleColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputToSeparateFiles" title="Enables hi-res outputs in separate files.">hiResOutputToSeparateFiles</a>{`": false,
        "`}<a href="#hiResOutputChannelContainersToSeparateFiles" title="Renders channel containers to separate files.">hiResOutputChannelContainersToSeparateFiles</a>{`": false,
        "`}<a href="#hiResOutputChannelContainersRenderEmptyPage" title="Adds empty pages for product pages without channel containers.">hiResOutputChannelContainersRenderEmptyPage</a>{`": true,
        "`}<a href="#hiResOutputBackgroundColor" title="The background color for the hi-res output.">hiResOutputBackgroundColor</a>{`": "rgba(255,255,255,0)",
        "`}<a href="#hiResOutputCompression" title="The type of hi-res output compression.">hiResOutputCompression</a>{`": "jpeg",
        "`}<a href="#hiResOutputJpegCompressionQuality" title="JPEG compression quality in percent.">hiResOutputJpegCompressionQuality</a>{`": 90,
        "`}<a href="#hiResOutputFlipMode" title="Flips hi-res outputs.">hiResOutputFlipMode</a>{`": "none",
        "`}<a href="#hiResOutputRotateMode" title="Renders hi-res outputs rotated.">hiResOutputRotateMode</a>{`": "none",
        "`}<a href="#pdf-metadata" title="PDF metadata.">hiResOutputPdfMetadata</a>{`": {
            "`}<a href="#pdfAuthor" title="The author of the PDF document.">author</a>{`": "",
            "`}<a href="#pdfCreator" title="The creator of the PDF document.">creator</a>{`": "",
            "`}<a href="#pdfKeywords" title="The keywords of the PDF document.">keywords</a>{`": "",
            "`}<a href="#pdfSubject" title="The subject of the PDF document.">subject</a>{`": "",
            "`}<a href="#pdfTitle" title="The title of the PDF document.">title</a>{`": ""
        },
        "`}<a href="#hiResOutputInStringPlaceholderHintsEnabled" title="Enables hints for unfilled in-string placeholders.">hiResOutputInStringPlaceholderHintsEnabled</a>{`": false,
        "`}<a href="#hiResOutputPdfFormat" title="Enables DeviceCMYK colors and PDF/X-4 in print files.">hiResOutputPdfFormat</a>{`": "Default",
        "`}<a href="#hiResOutputDestinationColorProfileName" title="Enables DeviceCMYK colors and PDF/X-4 in print files.">hiResOutputDestinationColorProfileName</a>{`": "",
        "`}<a href="#proofImageFileFormat" title="The type of proof image files.">proofImageFileFormat</a>{`": "jpeg",
        "`}<a href="#proofImageRgbColorProfileName" title="The name of an RGB color profile.">proofImageRgbColorProfileName</a>{`": "",
        "`}<a href="#proofImageCropSafetyLine" title="The name of a safety line which proof images are cropped to.">proofImageCropSafetyLine</a>{`": "",
        "`}<a href="#proofImageSafetyLinesEnabled" title="Allows for drawing safety lines on proof images.">proofImageSafetyLinesEnabled</a>{`": true,
        "`}<a href="#proofImageSpineAndFoldingLinesEnabled" title="Displays spines and folding lines on proof images.">proofImageSpineAndFoldingLinesEnabled</a>{`": true,
        "`}<a href="#proofImageFlipMode" title="The flip mode for proof images.">proofImageFlipMode</a>{`": "none",
        "`}<a href="#proofImageMockupEnabled" title="Displays mockups on proof images.">proofImageMockupEnabled</a>{`": true,
        "`}<a href="#proofImageShowStubContent" title="Enables the stub images and text hints in unfilled placeholders.">proofImageShowStubContent</a>{`": false,
        "`}<a href="#proofImageInterpolationMode" title="An interpolation algorithm used for resizing proof images.">proofImageInterpolationMode</a>{`": null,
        "`}<a href="#proofImageRotateMode" title="Renders proof images rotated.">proofImageRotateMode</a>{`": "none",
        "`}<a href="#proofImageInStringPlaceholderHintsEnabled" title="Enables hints for unfilled in-string placeholders.">proofImageInStringPlaceholderHintsEnabled</a>{`": false
    },
    "`}<a href="#preflight-warnings" title="Preflight Warnings.">violationWarningsSettings</a>{`": {
        "`}<a href="#NregionViolationWarningEnabled" title="Enables a warning when the user places elements out of a region.">regionViolationWarningEnabled</a>{`": true,
        "`}<a href="#NsafetyLineViolationWarningEnabled" title="Enables a warning when the user places elements beyond safety lines.">safetyLineViolationWarningEnabled</a>{`": true,
        "`}<a href="#NtextCropViolationWarningEnabled" title="Enables a warning when the user types too long text.">textCropViolationWarningEnabled</a>{`": true,
        "`}<a href="#shapeViolationsEnabled" title="Enables a warning when PDF and SVG vector graphics appears with losses.">shapeViolationsEnabled</a>{`": true,
        "`}<a href="#inPlaceNotSupportedWarningEnabled" title="Enables warnings about features unsupported for in-place editing.">inPlaceNotSupportedWarningEnabled</a>{`": false,
        "`}<a href="#warningTolerance" title="The distance to a safety line or the bleed zone.">tolerance</a>{`": 0.001,
        "`}<a href="#safety-lines" title="Enables warnings about bleed zone violation.">safetyLines</a>{`": {
            "`}<a href="#safetyLinesEnabled" title="Enables bleed zone validation.">enabled</a>{`": true,
            "`}<a href="#safetyLinesMode" title="The mode of the bleed zone validation.">mode</a>{`": "PartiallyInsideAny"
        },
        "`}<a href="#quality-meter" title="The image quality meter.">qualityMeter</a>{`": {
            "`}<a href="#qualityMeterEnabled" title="Enables the quality meter.">enabled</a>{`": true,
            "`}<a href="#qualityLevels" title="Image quality levels.">qualityLevels</a>{`": {
                "`}<a href="#qualityLevelsWarning" title="The warning image quality level.">warning</a>{`": 100,
                "`}<a href="#qualityLevelsBad" title="The unacceptable image quality level.">bad</a>{`": 50
            }
        }
    },
    "`}<a href="#watermark" title="Watermark Parameters.">watermark</a>{`": {
        "`}<a href="#text-parameters" title="Text Parameters.">text</a>{`": {
            "`}<a href="#watermarkTextText" title="The watermark text.">text</a>{`": "watermark",
            "`}<a href="#watermarkFont" title="Font parameters.">fontSettings</a>{`": {
                "`}<a href="#watermarkPostScriptName" title="The watermark font name.">postScriptName</a>{`": "Roboto-Regular",
                "`}<a href="#watermarksize" title="The font size of the watermark.">size</a>{`": 35,
                "`}<a href="#watermarkFauxBold" title="Applies the faux bold effect to the watermark.">fauxBold</a>{`": false,
                "`}<a href="#watermarkFauxItalic" title="Applies the faux italic effect to the watermark.">fauxItalic</a>{`": false
            },
            "`}<a href="#watermarkTextScale" title="The font size scale.">scale</a>{`": 0.28,
            "`}<a href="#watermarkTextOpacity" title="The opacity of the watermark text.">opacity</a>{`": 0.1
        },
        "`}<a href="#image-parameters" title="Image Parameters.">image</a>{`": {
            "`}<a href="#watermarkImageName" title="The filename of the watermark image.">name</a>{`": "watermark.png",
            "`}<a href="#watermarkImageRepeat" title="Displays the image in the center of the canvas/proof images or repeats it.">repeat</a>{`": false,
            "`}<a href="#watermarkImageOpacity" title="The opacity of the watermark image.">opacity</a>{`": 0.4
        },
        "`}<a href="#watermark-visibility" title="Watermark Visibility.">visibility</a>{`": {
            "`}<a href="#watermarkProof" title="Displays the watermark on proof images.">proof</a>{`": false,
            "`}<a href="#watermarkCanvas" title="Displays the watermark on the canvas.">canvas</a>{`": false
        }
    },
    "`}<a href="#image-resize-requests" title="Settings of rendering requests.">imageResizeRequestConfig</a>{`": {
        "`}<a href="#defaultRequestRatio" title="Image resize ratio to request a new render.">defaultRequestRatio</a>{`": 0.5,
        "`}<a href="#image-resize-rules" title="List of rules for image resize requests.">rules</a>{`": [ {
                "`}<a href="#minOriginalArea" title="Minimum original image area.">minOriginalArea</a>{`": 0,
                "`}<a href="#maxOriginalArea" title="Maximum original image area.">maxOriginalArea</a>{`": 1000000,
                "`}<a href="#requestRatio" title="Image size increase ratio to request a new image for this rule.">requestRatio</a>{`": 0.25
            } ]
    },
    "`}<a href="#widgets" title="Settings of widgets.">widgets</a>{`": {
        "`}<a href="#common-text-parameters" title="Common Parameters of Widgets.">common</a>{`": {
            "`}<a href="#textFormattingEnabled" title="Opens either RTE or a popup box for text editing.">textFormattingEnabled</a>{`": true,
            "`}<a href="#commonFontSize" title="Font size box parameters.">fontSize</a>{`": {
                "`}<a href="#maxFontSizeCommon" title="The maximum font size in the Rich Text dialog.">max</a>{`": 1296,
                "`}<a href="#minFontSizeCommon" title="The minimum font size in the Rich Text dialog.">min</a>{`": 4,
                "`}<a href="#fontSizeStepCommon" title="The step to change the font size in the Rich Text dialog.">step</a>{`": 10
            },
            "`}<a href="#commonTracking" title="Text tracking parameters.">tracking</a>{`": {
                "`}<a href="#maxTracking" title="The maximum tracking value.">max</a>{`": 300,
                "`}<a href="#minTracking" title="The minimum tracking value.">min</a>{`": -300,
                "`}<a href="#stepTracking" title="The step to change the tracking value.">step</a>{`": 25
            },
            "`}<a href="#commonLeading" title="Font size box parameters.">leading</a>{`": {
                "`}<a href="#maxLeading" title="The maximum leading value.">max</a>{`": 1296,
                "`}<a href="#minLeading" title="The minimum leading value.">min</a>{`": 6,
                "`}<a href="#stepLeading" title="The step to change the leading value.">step</a>{`": 10
            }
        },
        "`}<a href="#toolbox" title="Properties of the Toolbox.">Toolbox</a>{`": {
            "`}<a href="#toolboxEnabled" title="Displays the Toolbox.">enabled</a>{`": true,
            "`}<a href="#toolboxButtons" title="Configures the Toolbox buttons.">buttons</a>{`": [...],
            "`}<a href="#containerToolboxes" title="Configures the Toolbox for containers.">containerToolboxes</a>{`": [...],
            "`}<a href="#insertOnTop" title="Adds every new element to the top layer.">insertOnTop</a>{`": false
        },
        "`}<a href="#asset-manager" title="Properties of the Toolbox.">AssetManager</a>{`": {
            "`}<a href="#defaultTabName" title="The default tab is displayed when you open the Asset Manager.">defaultTabName</a>{`": "",
            "`}<a href="#enabledBackgroundChange" title="Opens the Asset Manager to select a background image.">enabledBackgroundChange</a>{`": true,
            "`}<a href="#maxUploadFileSize" title="The maximum size of files that can be uploaded through the Asset Manager.">maxUploadFileSize</a>{`": null,
            "`}<a href="#saveAllowedTabAfterInsert" title="Restricts the image selection to a tab.">saveAllowedTabAfterInsert</a>{`": false,
            "`}<a href="#assetTabs" title="The array of tabs available in the Asset Manager.">tabs</a>{`": [...]
        },
        "`}<a href="#object-inspector" title="Properties of the Object Inspector.">ObjectInspector</a>{`": {
            "`}<a href="#bgItemEnabled" title="Displays the background element in the Object Inspector.">bgItemEnabled</a>{`": true,
            "`}<a href="#dndEnabled" title="Enables drag-and-drop for elements in the Object Inspector.">dndEnabled</a>{`": true,
            "`}<a href="#violationWarningsEnabled" title="Enables preflight warnings.">violationWarningsEnabled</a>{`": true,
            "`}<a href="#variableItemsEnabled" title="Enables check boxes to select variable fields.">variableItemsEnabled</a>{`": false,
            "`}<a href="#emptyListTextEnabled" title="Enables text, displayed when a loaded template has no customizable layers.">emptyListTextEnabled</a>{`": true,
            "`}<a href="#objectInspectorPosition" title="Displays the Object Inspector from the right or left side of the canvas.">position</a>{`": "Right",
            "`}<a href="#aboveCanvasOnSmallScreenEnabled" title="If true, the Object Inspector appears above the canvas on small-screen devices.">aboveCanvasOnSmallScreenEnabled</a>{`": true,
            "`}<a href="#objectInspectorIsHidden" title="If true, the editor hides the Object Inspector when opens.">isHidden</a>{`": false,
            "`}<a href="#objectInspectorToggle" title="If true, the Toggle button appears.">toggleEnabled</a>{`": false,
            "`}<a href="#inStringPlaceholderMode" title="Defines the appearance of in-string placeholders.">inStringPlaceholderMode</a>{`": "Multiple",
            "`}<a href="#showItemName" title="Enables text labels for design elements.">showItemName</a>{`": false,
            "`}<a href="#groupRenameEnabled" title="Allows renaming group names.">groupRenameEnabled</a>{`": true,
            "`}<a href="#groupsExpandedByDefault" title="Automatically expands groups when loading a product.">groupsExpandedByDefault</a>{`": false,
            "`}<a href="#expandNestedGroups" title="Expands all nested groups when clicking the parent group.">expandNestedGroups</a>{`": false,
            "`}<a href="#containerTabsEnabled" title="Displays the container tabs.">containerTabsEnabled</a>{`": true
        },
        "`}<a href="#item-menu" title="Commands of the Item Menu.">ItemMenu</a>{`": {
            "`}<a href="#objectManipulationEnabled" title="Enables deleting and cloning items in a product.">objectManipulationEnabled</a>{`": true,
            "`}<a href="#verticalAlignmentEnabled" title="Enables the vertical alignment of items to the safe area and group alignment.">verticalAlignmentEnabled</a>{`": true,
            "`}<a href="#horizontalAlignmentEnabled" title="Enables the horizontal alignment of items to the safe area and group alignment.">horizontalAlignmentEnabled</a>{`": true,
            "`}<a href="#changeZOrderEnabled" title="Enables changing the Z-order of items.">changeZOrderEnabled</a>{`": true,
            "`}<a href="#renameEnabled" title="Enables renaming items.">renameEnabled</a>{`": false,
            "`}<a href="#groupItemsEnabled" title="Enables grouping items.">groupItemsEnabled</a>{`": true,
            "`}<a href="#cloneItemsEnabled" title="Enables cloning items.">cloneItemsEnabled</a>{`": true
        },
        "`}<a href="#top-toolbar" title="Properties of the Top Toolbar.">TopToolbar</a>{`": {
            "`}<a href="#alignButtonsEnabled" title="Displays the vertical aligment buttons.">alignButtonsEnabled</a>{`": true,
            "`}<a href="#displayAlignButtonsAsDropdown" title="Displays the drop-down aligment buttons.">displayAlignButtonsAsDropdown</a>{`": true,
            "`}<a href="#displayCaptionInButtons" title="Displays button captions.">displayCaptionInButtons</a>{`": false,
            "`}<a href="#historyButtonsEnabled" title="Displays the Undo and Redo buttons.">historyButtonsEnabled</a>{`": true,
            "`}<a href="#deleteButtonEnabled" title="Displays the Delete button.">deleteButtonEnabled</a>{`": false,
            "`}<a href="#revertButtonEnabled" title="Displays the Revert button.">revertButtonEnabled</a>{`": true,
            "`}<a href="#layoutItemSettingsButtonEnabled" title="Displays the Layout Settings button.">layoutItemSettingsButtonEnabled</a>{`": true,
            "`}<a href="#displayZOrderButtonsAsDropdown" title="Displays the drop-down z-order buttons.">displayZOrderButtonsAsDropdown</a>{`": true,
            "`}<a href="#cloneButtonEnabled" title="Displays the Clone button.">cloneButtonEnabled</a>{`": false,
            "`}<a href="#groupButtonEnabled" title="Displays the Group/Ungroup button.">groupButtonEnabled</a>{`": true,
            "`}<a href="#editTextButtonEnabled" title="Displays the Edit button.">editTextButtonEnabled</a>{`": false,
            "`}<a href="#textVAlignmentButtonsEnabled" title="Displays the text vertical alignment buttons.">textVAlignmentButtonsEnabled</a>{`": true,
            "`}<a href="#textAlignmentButtonsEnabled" title="Displays the text alignment buttons.">textAlignmentButtonsEnabled</a>{`": true,
            "`}<a href="#textAllowChangeColumnCount" title="Displays the Columns box.">textAllowChangeColumnCount</a>{`": true,
            "`}<a href="#textEmphasisButtonsEnabled" title="Displays the faux text style buttons.">textEmphasisButtonsEnabled</a>{`": true,
            "`}<a href="#textFontFamilyButtonEnabled" title="Displays the font list.">textFontFamilyButtonEnabled</a>{`": true,
            "`}<a href="#textFontStyleButtonEnabled" title="Displays the font style button.">textFontStyleButtonEnabled</a>{`": true,
            "`}<a href="#textFontSizeButtonEnabled" title="Displays the font size spin box.">textFontSizeButtonEnabled</a>{`": true,
            "`}<a href="#textFontColorButtonEnabled" title="Displays the text color picker.">textFontColorButtonEnabled</a>{`": true,
            "`}<a href="#textListButtonsEnabled" title="Displays a group of list buttons.">textListButtonsEnabled</a>{`": true,
            "`}<a href="#textParagraphButtonEnabled" title="Displays the Paragraph button.">textParagraphButtonEnabled</a>{`": true,
            "`}<a href="#textBendButtonEnabled" title="Displays the Bend button for arched text.">textBendButtonEnabled</a>{`": true,
            "`}<a href="#textShadowButtonEnabled" title="Displays the Shadow button.">textShadowButtonEnabled</a>{`": true,
            "`}<a href="#textStrokeButtonEnabled" title="Displays the Stroke button.">textStrokeButtonEnabled</a>{`": true,
            "`}<a href="#textStrokeColorButtonEnabled" title="Displays the Stroke Color button.">textStrokeColorButtonEnabled</a>{`": true,
            "`}<a href="#closeFontMenuOnClickEnabled" title="Specifies when the font list should be closed.">closeFontMenuOnClickEnabled</a>{`": true,
            "`}<a href="#opacitySliderEnabled" title="Provides the ability to change layer opacity.">opacitySliderEnabled</a>{`": true,
            "`}<a href="#textLeadingButtonEnabled" title="Displays the text leading button.">textLeadingButtonEnabled</a>{`": true,
            "`}<a href="#textTrackingButtonEnabled" title="Displays the text tracking button.">textTrackingButtonEnabled</a>{`": true,
            "`}<a href="#multiRowModeEnabled" title="Displays the toolbar in the multi-row mode.">multiRowModeEnabled</a>{`": false,
            "`}<a href="#borderColorButtonEnabled" title="Displays the Border color button.">borderColorButtonEnabled</a>{`": true,
            "`}<a href="#borderWidthButtonEnabled" title="Displays the Border width button.">borderWidthButtonEnabled</a>{`": true,
            "`}<a href="#overlayColorButtonEnabled" title="Displays the Color overlay button.">overlayColorButtonEnabled</a>{`": false,
            "`}<a href="#imageEditButtonEnabled" title="Displays the Edit button for images.">imageEditButtonEnabled</a>{`": true,
            "`}<a href="#imageSelectButtonEnabled" title="Displays the Select image button for images.">imageSelectButtonEnabled</a>{`": true,
            "`}<a href="#placeholderEditButtonEnabled" title="Displays the Edit button for image placeholders.">placeholderEditButtonEnabled</a>{`": true,
            "`}<a href="#placeholderSelectButtonEnabled" title="Displays the Select image button for image placeholders.">placeholderSelectButtonEnabled</a>{`": true,
            "`}<a href="#placeholderScaleButtonEnabled" title="Displays the Select placeholder content scale.">placeholderScaleButtonEnabled</a>{`": true,
            "`}<a href="#placeholderResetContentButtonEnabled" title="Displays the Reset content button for image placeholders.">placeholderResetContentButtonEnabled</a>{`": true,
            "`}<a href="#changeBarcodeTypeButtonEnabled" title="Displays the Change barcode type button.">changeBarcodeTypeButtonEnabled</a>{`": true,
            "`}<a href="#barcodeColorButtonEnabled" title="Displays the Barcode color button.">barcodeColorButtonEnabled</a>{`": true,
            "`}<a href="#barcodeCaptionButtonEnabled" title="Enables the Code checkbox to display human-readable text.">barcodeCaptionButtonEnabled</a>{`": false,
            "`}<a href="#placeInSafetyAreaButtonEnabled" title="Displays the Position button.">placeInSafetyAreaButtonEnabled</a>{`": true,
            "`}<a href="#fontPreviewSize" title="The font size of font names in the Select font list.">fontPreviewSize</a>{`": 17,
            "`}<a href="#textStroke" title="Text stroke dialog parameters.">textStroke</a>{`": { "max": 5, "min": 0.01, "step": 0.01 },
            "`}<a href="#textShadow" title="Text shadow dialog parameters.">textShadow</a>{`": {
                "`}<a href="#textShadowAngle" title="The shadow angle.">angle</a>{`": { "max": 360, "min": 0, "step": 15 },
                "`}<a href="#textShadowDistance" title="The distance between the shadow and text.">distance</a>{`": { "max": null, "min": 0, "step": 0.1 },
                "`}<a href="#textShadowSize" title="The shadow size.">size</a>{`": { "max": null, "min": 0, "step": 0.1 }
            },
            "`}<a href="#fontSizeParams" title="Font size box parameters.">fontSize</a>{`": {
                "`}<a href="#maxFontSize" title="The maximum font size.">max</a>{`": 100,
                "`}<a href="#minFontSize" title="The minimum font size.">min</a>{`": 4,
                "`}<a href="#fontSizeStep" title="The step for changing a font size when using the spin box.">step</a>{`": 0.5
            },
            "`}<a href="#zOrderTopToolbar" title="Z-order control parameters.">zOrder</a>{`": {
                "`}<a href="#zOrderLevelButtonsEnabled" title="Enables the Level up/down buttons.">zOrderLevelButtonsEnabled</a>{`": true,
                "`}<a href="#zOrderSendToButtonsEnabled" title="Enables the Send to front/bottom buttons.">zOrderSendToButtonsEnabled</a>{`": true
            }
        },
        "`}<a href="#bottom-toolbar" title="The Bottom Toolbar properties.">BottomToolbar</a>{`": {
            "`}<a href="#safetyLinesCheckboxEnabled" title="Displays the Safety lines check box.">safetyLinesCheckboxEnabled</a>{`": true,
            "`}<a href="#gridCheckboxEnabled" title="Displays the Grid check box.">gridCheckboxEnabled</a>{`": true,
            "`}<a href="#previewModeCheckboxEnabled" title="Displays the Preview mode check box.">previewModeCheckboxEnabled</a>{`": true,
            "`}<a href="#snapLinesItemsCheckboxEnabled" title="Displays the Snap to items check box.">snapLinesItemsCheckboxEnabled</a>{`": true,
            "`}<a href="#snapLinesPrintAreaCheckboxEnabled" title="Displays the Snap to page check box.">snapLinesPrintAreaCheckboxEnabled</a>{`": true,
            "`}<a href="#snapLinesSafetyLinesCheckboxEnabled" title="Displays the Snap to safety lines check box.">snapLinesSafetyLinesCheckboxEnabled</a>{`": true,
            "`}<a href="#snapLinesInteractiveZonesCheckboxEnabled" title="Displays the Snap to interactive zones check box.">snapLinesInteractiveZonesCheckboxEnabled</a>{`": true,
            "`}<a href="#zoomValueEnabled" title="Displays the current zoom value.">zoomValueEnabled</a>{`": true,
            "`}<a href="#zoomButtonsEnabled" title="Displays the Zoom in and Zoom out buttons.">zoomButtonsEnabled</a>{`": true,
            "`}<a href="#rotateButtonEnabled" title="Displays the Rotate button.">rotateButtonEnabled</a>{`": true,
            "`}<a href="#fullWindowButtonEnabled" title="Displays the Full window button.">fullWindowButtonEnabled</a>{`": false,
            "`}<a href="#fullScreenButtonEnabled" title="Displays the Full screen button.">fullScreenButtonEnabled</a>{`": true,
            "`}<a href="#surfaceSwitch" title="Properties of the surface selector.">surfaceSwitch</a>{`": {
                "`}<a href="#newSurfaceSwitchEnabled" title="Enables the surface (page) selector.">enabled</a>{`": true,
                "`}<a href="#showThumbnails" title="Displays surface thumbnails.">showThumbnails</a>{`": false,
                "`}<a href="#showSurfaceNames" title="Displays surface names in the surface selector.">showSurfaceNames</a>{`": true,
                "`}<a href="#scrollPageButtonsEnabled" title="Displays the Next and Previous buttons, which allow for scrolling the selector.">scrollPageButtonsEnabled</a>{`": true,
                "`}<a href="#toggleSurfaceButtonsEnabled" title="Displays the Next and Previous buttons, which allow for switching surfaces.">toggleSurfaceButtonsEnabled</a>{`": false,
                "`}<a href="#firstAndLastButtonsEnabled" title="Displays the First and Last buttons for the page navigation.">firstAndLastButtonsEnabled</a>{`": true,
                "`}<a href="#specificForSurfaceCount" title="Defines the swiper for products of the certain number of pages.">specificForSurfaceCount</a>{`": { }
            }
        },
        "`}<a href="#qr-code" title="Properties of Qr Code dialog box.">QrCodeDialog</a>{`": {
            "`}<a href="#qrCodeDialogDefaultType" title="The default type of a QR code.">defaultType</a>{`": "QrUrl",
            "`}<a href="#qrCodeTabs" title="Defines what content can be encoded.">tabs</a>{`": ["QrVCard", "QrUrl", "QrPhone", "QrData"]
        },
        "`}<a href="#linear-barcode" title="Linear Barcode dialog properties.">LinearBarcodeDialog</a>{`": {
            "`}<a href="#linearBarcodeDialogDefaultType" title="The default type of a barcode.">defaultType</a>{`": "LinearEan8",
            "`}<a href="#autoChecksum" title="Defines how the checksum digit is calculated for EAN-8.">autoChecksum</a>{`": false
        },
        "`}<a href="#rich-text-editor" title="Properties of the Rich Text dialog.">RichTextDialog</a>{`": {
            "`}<a href="#applyToAllTextMode" title="Allows you to apply formatting to a whole rich text field.">applyToAllTextMode</a>{`": false,
            "`}<a href="#richTextDialogBgColor" title="The text background color.">bgColor</a>{`": "white",
            "`}<a href="#createMultiColumnText" title="Allows for creating multicolumn text.">createMultiColumnText</a>{`": false,
            "`}<a href="#richTextDialogshowHint" title="Enables hints in the drop-down lists.">showHint</a>{`": {"font": true, "style": true, ...},
            "`}<a href="#richTextDialogshowInput" title="Enables user input in drop-down lists.">showInput</a>{`": {
                "`}<a href="#showInputSize" title="Enables user input in the Font size.">size</a>{`": true
            },
            "`}<a href="#ckeditorConfig" title="Special characters.">ckeditorConfig</a>{`": {
                "`}<a href="#ckspecialChars" title="An array defining the Special character list.">specialChars</a>{`": <![CDATA[["!", "&quot;", "#", "$", "%", "&amp;", ...]]]>
            },
            "`}<a href="#textOutline" title="Text outline parameters.">textOutline</a>{`": {
                "`}<a href="#textOutlineEnabled" title="Enables text outline.">enabled</a>{`": false,
                "`}<a href="#textOutlineHueThreshold" title="The hue threshold.">hueThreshold</a>{`": 74,
                "`}<a href="#textOutlineBrightnessThreshold" title="The brightness threshold.">brightnessThreshold</a>{`": 5,
                "`}<a href="#textOutlineColor" title="The outline color.">color</a>{`": "rgba(0, 0, 0, 0.2)"
            },
            "`}<a href="#RichTextZoom" title="Properties of the Rich Text zoom.">zoom</a>{`": {
                "`}<a href="#RichTextZoomEnabled" title="Enables the zoom slider in the Rich Text dialog.">enabled</a>{`": false,
                "`}<a href="#minZoomPct" title="The least value of the zoom slider.">minZoomPct</a>{`": 10,
                "`}<a href="#maxZoomPct" title="The most value of the zoom slider.">maxZoomPct</a>{`": 500,
                "`}<a href="#RichTextAutoZoom" title="Rich text auto-zoom parameters.">autoZoom</a>{`": {
                    "`}<a href="#RichTextAutoZoomEnabled" title="Enables auto-zoom at opening the Rich Text dialog.">enabled</a>{`": false,
                    "`}<a href="#minFontSizeThresholdPt" title="The font size threshold in points.">minFontSizeThresholdPt</a>{`": 12,
                    "`}<a href="#maxFontSizeThresholdPt" title="The font size threshold in points.">maxFontSizeThresholdPt</a>{`": 36
                }
            }
        },
        "`}<a href="#finish-button" title="Finish Button properties.">FinishButton</a>{`": {
            "`}<a href="#finishButtonMode" title="The mode of the Finish design button.">mode</a>{`": "Disabled"
        },
        "`}<a href="#image-editor" title="Properties of the Image Editor.">ImageEditorDialog</a>{`": {
            "`}<a href="#colorAdjustButtonEnabled" title="Displays the Adjust button in the Image Editor.">colorAdjustButtonEnabled</a>{`": true,
            "`}<a href="#cropButtonEnabled" title="Displays the Crop button in the Image Editor.">cropButtonEnabled</a>{`": true,
            "`}<a href="#backgroundEraseButtonEnabled" title="Displays the Background button in the Image Editor.">backgroundEraseButtonEnabled</a>{`": true,
            "`}<a href="#fullscreenOnTouchDevice" title="Enables the full-screen mode on mobile devices.">fullscreenOnTouchDevice</a>{`": true,
            "`}<a href="#imageContextMenuEnabled" title="Displays the context menu in the Image Editor.">imageContextMenuEnabled</a>{`": true
        },
        "`}<a href="#color-picker" title="Properties of the Color Picker.">ColorPicker</a>{`": {
            "`}<a href="#showPaletteOnly" title="Shows only the predefined palettes.">showPaletteOnly</a>{`": false,
            "`}<a href="#sectionCollapseEnabled" title="Allows for collapsing the sections of colors.">sectionCollapseEnabled</a>{`": false,
            "`}<a href="#colorTypeDropdownEnabled" title="Enables the color type switcher.">colorTypeDropdownEnabled</a>{`": true,
            "`}<a href="#eyeDropperEnabled" title="Enables the eyedropper.">eyeDropperEnabled</a>{`": true,
            "`}<a href="#defaultColorType" title="The initial color type.">defaultColorType</a>{`": "cmyk",
            "`}<a href="#availableColorTypes" title="Specifies available color types.">availableColorTypes</a>{`": ["cmyk", "rgb", "hex"],
            "`}<a href="#paletteHintsEnabled" title="Displays names of color swatches.">paletteHintsEnabled</a>{`": true,
            "`}<a href="#cmykDecimalsEnabled" title="Displays decimal places for CMYK values.">cmykDecimalsEnabled</a>{`": false,
            "`}<a href="#colorSpace" title="Outdated. The color space.">colorSpace</a>{`": "cmyk",
            "`}<a href="#colorSpaceDropdownEnabled" title="Outdated. Enables the color space switcher.">colorSpaceDropdownEnabled</a>{`": true,
			"`}<a href="#sections" title="An array of predefined palettes.">sections</a>{`": [{
                "`}<a href="#sectionType" title="The section type.">type</a>{`": "PaletteSection",
                "`}<a href="#sectionTranslationKey" title="The section name.">translationKey</a>{`": "Default",
                "`}<a href="#sectionViewType" title="The appearance of the color swatches.">viewType</a>{`": "Block",
                "`}<a href="#sectionTargets" title="Target color properties.">targets</a>{`": ["All"],
                "`}<a href="#sectionPalette" title="Color swatches.">palette</a>{`": [["cmyk(0%,100%,100%,0%,100%)","cmyk(0%,0%,100%,0%,100%)",...],...]
            }]
        }
    }
}`}</code></pre>

## Common Parameters

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **spellCheckEnabled** | Enables spell checking for product text fields and for the Rich text dialog. The value in the config is `true`. | boolean |
|  [initialMode](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/simple-and-advanced-modes.md) | The initial mode of the web-to-print editor, simple or advanced. If you want to disable the advanced mode, set this parameter to `"SimpleOnly"`. The value in the config is `"Simple"`. | `"Simple"`, `"Advanced"`, `"SimpleOnly"` |
|  [fontList](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/font-list.md) | A list of fonts available for the user in the editor. All these fonts should be uploaded to the font folder on the server; by default it is `../assets/fonts/`. If not specified, the Design Editor enables all the fonts from this folder. The value in the config is `{ "appFonts": ["*"] }`. | array of font names |
|  **fontListMode** | A mode of the font list, simple or advanced. The simple mode allows users to select a font and set a font size. The advanced mode also provides the ability to change the font style. The value in the config is `"Advanced"`. | `"Simple"`, `"Advanced"` |
|  [assetSources](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-manager.md#configuring-the-sources) | Configuration of asset sources available in the [Asset Manager](#asset-manager). By default, only the private user gallery is defined. For config examples, you can refer to the [image-manager](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-manager.md) topic. | object |
|  **defaultLanguage** | The default interface language. The value in the config is `"en"`. | string |
|  [loadUserInfoButtonEnabled](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/user-info.md) | Displays the **Load my info** button. The value in the config is `false`. | boolean |
|  [autoLoadUserInfo](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/user-info.md) | If `true`, the product is automatically populated with predefined data when it is loaded into the editor; the **Load my info** button is not displayed in this case. The value in the config is `true`. | boolean |
|  **createGroupsAs** | Enables either the `"smart"` or `"base"` type for new groups of design elements. So-called *smart* groups support the auto layout. Your users can change the group type and its properties by using the [Smart group](#layoutItemSettingsButtonEnabled) button. The value in the config is `"smart"`. | `"smart"`, `"base"` |
|  **autoImageUploadModeEnabled** | If `true`, opens a dialog box for selecting a private image to insert it into the placeholder. If `false`, the Asset Manager opens for selection. The value in the config is `false`. | boolean |
|  **revertProductConfirmationEnabled** | Enables the confirmation dialog when reverting a product to its initial state. The value in the config is `true`. | boolean |
|  **imageEditorEnabled** | Enables the Image Editor. The value in the config is `true`. | boolean |
|  **deleteItemConfirmationEnabled** | Enables the confirmation dialog when deleting an item from a product. The value in the config is `true`. | boolean |
|  **restoreProductOnReloadEnabled** | Enables restoring a product state when the design page is reloaded in the browser. If `false`, the product is reverted on reloading. The value in the config is `false`. | boolean |
|  [alignToSafetyLineName](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/bleeds-and-safety-zone.md) | The name of a safety line to which an item will be aligned. If there is no safety line with a name, then the item will be aligned to the first safety line in the safety lines array. The value in the config is `"bleed"`. | string |
|  **variableItemsMaskSymbol** | A symbol marking design elements as variable items. By default, it is `"%"`. | string |
|  **canvasOnlyMode** | Hides all interface elements and displays only the canvas in the editor. The value in the config is `false`. | boolean |
|  **defaultProductTheme** | The name of the default color theme. For an example, you can refer to the [change-theme](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/change-theme.md) topic. | string |
|  **productThemes** | The color sets containing the color name - color value pairs. You can define as many themes as you need. For an example, you can refer to the [change-theme](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/change-theme.md) topic. | object |
|  **themeConfiguration** | Properties that redefine the appearance of the UI theme. In the current implementation, you can change the primary theme color and set a new image for the standard preloader. For an example, you can refer to the [IThemeConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IThemeConfiguration.md) topic. | object |
|  **variableTokens** | A list of tokens available for insertion into text via a drop-down button in the Top Toolbar. The button appears only while a user is editing text. If not set, the button is hidden. Each token is defined by a `title` (the display name in the drop-down list) and a `token` (the string inserted at the cursor position). For an example, refer to the [VariableToken](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.VariableToken.md) topic. | array of objects |

## Canvas

Object: `canvas`

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **color** | The canvas color. This color is visible if a transparent object is placed on the canvas. The value in the config is `"#fff"`. | color in css-compatible format |
|  **shadowEnabled** | Enables the canvas shadow. The value in the config is `false`. | boolean |
|  **paddingPct** | Padding between the canvas and the canvas viewer, in percent. The value in the config is `5`. | integer |
|  **maskedPlaceholderUnderscoreEnabled** | Enables displaying underscores in blank masked text layers. If `false` and the user has partially filled the text placeholder in, then the rest blank symbols are displayed as spaces. If `true`, the blank portion displays underscores. The value in the config is `true`. | boolean |
|  **suppressOutOfRegionManipulation** | Disallows the user to drag elements out of the region on the canvas. If `true`, your users cannot manipulate items out of regions. The value in the config is `true`. | boolean |
|  **violationWarningButtonsEnabled** | Enables preflight warnings on the canvas. If `true`, notifying icons appear on low-resolution images, safety line violation, region violation, and text clipping. The value in the config is `true`. | boolean |
|  **qualityChangeContainersEnabled** | Enables the DPI bar when resizing images. This bar displays the actual DPI of images and the resolution specified in the [hiResOutputDpi](#hiResOutputDpi) property. The value in the config is `true`. | boolean |
|  **floatingItemToolbarEnabled** | Enables the Floating Item Toolbar with the **Select Image**, **Edit** and **Delete** buttons right on the canvas. The value in the config is `true`. | boolean |
|  **autoItemSelectionEnabled** | Allows you to automatically select the first design element in the simple and advanced editing modes. If an element is selected, you can switch between elements using Tab and Shift+Tab. The value in the config is `true`. | boolean |
|  **autoPlaceholderEditModeEnabled** | Allows your users to work with the content of image placeholders by clicking a placeholder in either simple or advanced edit mode. If `true`, the **Handle** does not appear. The value in the config is `false`. | boolean |
|  **gridVisible** | Displays the grid when the canvas opens. The value in the config is `false`. | boolean |
|  **safetyLinesVisible** | Displays safety lines when the canvas opens. The value in the config is `true`. | boolean |
|  **snapLinesVisible** | Displays snap lines when the canvas opens. The value in the config is `true`. | boolean |
|  **canvasItemHoverEnabled** | Enables text labels for editable design elements. The value in the config is `false`. | boolean |
|  **historySize** | The number of actions that can be reverted by using the **Undo** button. The value in the config is `10`. Recommended to specify a value less than `100`. | number |
|  **pinchZoomEnabled** | Allows users to zoom the canvas using the pinch gesture on mobile devices. The value in the config is `true`. | boolean |
|  **textEditor** | Specifies the text editor mode when the WYSIWYG editor is active. `"default"` (platform dependent), `"html"` (allows IME). | `"default"`, `"html"` |
|  **curvedTextBaselineDrawStates** | Specifies an array of states in which the path of curved text will be displayed. The value in the config is `["edit", "select", "hover", "move", "rotate", "resize"]`. | array of ` "idle" `, ` "edit" `, ` "select" `, ` "hover" `, ` "move" `, ` "resize" `, ` "rotate" ` |
|  **rotatedTextInPlaceEditEnabled** | If `true`, text in rotated and arched elements is edited on the canvas. If `false`, enables editing in popup boxes. The default value is `true`. | boolean |
|  **inactiveContainerTransparencyEnabled** | If `true`, displays the content of spot containers transparent. The default value is `true`. See [Post Press Finishing](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers.md). | boolean |
|  **inactiveContainerTransparencyLevel** | Defines transparency for inactive containers in range [`0`, `1`]. `0` is opaque, `1` is 100% transparent. The value in the config is `0.8`. See [Post Press Finishing](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers.md). | number |
|  **scrollbarEnabled** | Enables scrollbars when the design does not fit the canvas at the current zoom level. The default value is `false`. | boolean |

### Canvas Zoom

Object: `canvas.zoom`

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **min** | The minimum zoom of the canvas. The value in the config is `0.01`. | number |
|  **max** | The maximum zoom of the canvas. The value in the config is `16`. | number |
|  **step** | The step of increasing or decreasing the zoom level of the canvas. The value in the config is `0.25`. | number |

### Rulers

Object: [canvas.rulers](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#rulers)

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **enabled** | Displays the canvas rulers. The value in the config is `true`. | boolean |
|  **unit** | The measurement unit of the rulers. The value in the config is `"inch"`. | `"inch"`, `"mm"`, `"cm"`, `"point"`, `"custom"` |
|  **customUnitScale** | The ratio of the custom unit to points. Applied only if the [unit](#rulersUnit) parameter is set to `"custom"`. The value in the config is `1`. | number |
|  **origin** | The point of origin relative to the upper-left corner of the design. The value in the config is `{ "X": 0, "Y": 0 `. | object |

### Canvas Rotation

Object: `canvas.rotation`

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **type** | The angle to which the canvas is rotated when clicking the [Rotate](#rotateButtonEnabled) button in the Bottom Toolbar. The value in the config is `"Rotate90"`. | `"Rotate90"`, `"Rotate180"`, `"Rotate270"` |

### Snap Lines

Object: [canvas.snapLines](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#snap-lines)

#### The snap line type
Objects: `items`, `printArea`, `safetyLines`, `region`, `grid`

| Name | Description | Possible values |
| :--- | :--- | :--- |
|  **enabled** | Displays snap lines of this type. The value in the config is `true`. | boolean |
|  **color** | The color of snap lines of this type. The value in the config is `"rgb(255,0,255)"`. | string |
|  **tolerance** | The distance between an object and a snap line where the object clings to the line, in pixels. The value in the config is `5`. | number |
|  **priority** | The priority of these snap lines. In the case of overlapping tolerance zones, the highest priority line is displayed. The higher the value, the higher the priority. Default: `0`. | number |
|  **includeLocked** | When aligning to `items`, specifies whether to align to locked items. The value in the config is `false`. | boolean |

### Bleed and Trim Lines

Object: [`canvas.printZone`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/bleeds-and-safety-zone.md#changing-the-appearance-of-the-bleed-zone)

Name | Description | Possible values

Marking type
 objects: <code>bleed</code>, <code>trim</code>, or <code>region</code>

color | The main color of lines. The value in the config is <code>"rgb(255,0,0)"</code>. | color in css-compatible format

altColor | The alternative color. The value in the config is <code>"rgba(255,0,0,0)"</code>. | color in css-compatible format

step | The step of dashed lines, in pixels. The value in the config is <code>5</code>. | number

width | The width of dashed lines, in pixels. The value in the config is <code>1</code>. | number

visible | If <code>true</code>, displays lines denoting the bleed zone, trim lines, or region, correspondingly. The value in the config is <code>true</code> for <code>bleed</code> and <code>trim</code> and <code>false</code> for <code>region</code>. | boolean

### Item processing rules

Object: `canvas.handlers`

Name | Description | Possible values

placeholderEditingViewMode | Defines how the product will appear on the canvas when editing image placeholders. If <code>"normal"</code>, the content that is outside its image placeholder appears transparent when the placeholder is in the edit mode. The <code>"overlay"</code> mode moves the placeholder content to the highest z-order and fades out the area outside this content when entering the edit mode. The value in the config is <code>"overlay"</code>. | <code>"overlay"</code>, <code>"normal"</code>

placeholderCropMode | Enables Adobe Express-like cropping mode for placeholders, allowing intuitive scaling and cropping via grip handles. The default value is <code>true</code>. | boolean

placeholderFitMode | Controls the behavior of placeholder resizing since version 7.1.55. If set to <code>"Always"</code>, the fit position is preserved regardless of resizing (new behavior in 7.1.55). If set to <code>"Insert"</code>, the legacy behavior (pre-7.1.55) is restored, where the fit position may change when resizing. The default value is <code>"Always"</code>. | <code>"Always"</code>, <code>"Insert"</code>

imageMinDpi | The minimum allowable DPI value that can be achieved when resizing images. By default, this limit is not set. | number

Limit on the minimum item size
 object: <code>canvas.handlers.resizeLimits</code>

common | Defines the smallest size, in points, to which items on the canvas can be downsized. You can limit either width, height, or both: <code>{'{"width":100, "height":50}'}</code>. The <code>"common"</code> size limit is applicable to all items. In the same way, you can define the limitation separately to <code>"image"</code>, <code>"shape"</code>, <code>"barcode"</code>, <code>"text"</code>, <code>"archedText"</code>, <code>"rectangle"</code>, <code>"ellipse"</code>, and <code>"placeholder"</code>. Note that these limits only apply to user manipulations on the canvas and do not affect the use of APIs. By default, this limit is not set. | object

### Text Lists

Object: [`canvas.listSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/lists.md)

Name | Description | Possible values

maxLevel | The maximum number of levels in multilevel lists. The value in the config is <code>3</code>. | number

firstLineIndent | The distance between the bullet and text in the first line of a list item, in points. The value in the config is <code>-20</code>. | number

listIndent | The distance between the left edge of the text element and the leftmost line of list items in this text element, in points. The value in the config is <code>30</code>. | number

levelIndent | The offset of each next level of the list relative to the previous level, in points. The value in the config is <code>40</code>. | number

tabOffset | The offset that will appear before text on the first line if this text may overlap the bullet, in points. If this value is not enough to create an indent, it will be added again. The value in the config is <code>10</code>. | number

numberingFormat | The numbered list marker format. If <code>"none"</code>, then list items will represent paragraphs without numbers. This marker format will be used when creating lists through the Top toolbar. The value in the config is <code>"number"</code>. | <code>"none"</code>, <code>"number"</code>, <code>"lowerLetter"</code>, <code>"upperLetter"</code>, <code>"lowerRoman"</code>, <code>"upperRoman"</code>

bulletChar | The bulleted list marker that will be used when creating lists through the Top toolbar. The value in the config is <code>"•"</code>. | symbol

## Default Item Parameters

Object: [`defaultItemsConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/toolbox.md#default-parameters-of-design-elements)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| barcode | Default parameters of barcodes, which users add to the canvas. For an example, refer to the [IBarcodeItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IBarcodeItemData.md) topic. | object |
| ellipse | Default parameters of ellipses, which users add to the canvas. For an example, refer to the [IEllipseItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IEllipseItemData.md) topic. | object |
| image | Default parameters of images, which users add to the canvas. For an example, refer to the [IImageItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md) topic. | object |
| line | Default parameters of lines, which users add to the canvas. For an example, refer to the [ILineItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/ILineItemData.md) topic. | object |
| placeholder | Default parameters of placeholders, which users add to the canvas. For an example, refer to the [IPlaceholderItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IPlaceholderItemData.md) topic. | object |
| rectangle | Default parameters of rectangles, which users add to the canvas. For an example, refer to the [IRectangleItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md) topic. | object |
| richText | Default parameters of rich formatted texts, which users add to the canvas. For an example, refer to the [IBoundedTextItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IBoundedTextItemData.md) topic. | object |
| shape | Default parameters of shapes, which users add to the canvas. For an example, refer to the [IShapeItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IShapeItemData.md) topic. | object |
| text | Default parameters of texts, which users add to the canvas. For an example, refer to the [ITextItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/ITextItemData.md) topic. | object |
| group | Default parameters of SVG, PDF, and PSD assets loaded to the canvas in the group mode. For an example, refer to the [IGroupItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IGroupItemData.md) topic. | object |
| clipart | Default parameters of SVG, PDF, and PSD assets loaded to the canvas in the clipart mode. For an example, refer to the [IClipartItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IClipartItemData.md) topic. When this object is not defined, the [group](#groupDefault) properties will be applied to clipart. | object |

## Grid

Object: [`grid`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#grids)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| enabled | Enables the grid. If the grid is enabled it can be toggled by the **Grid** button. The value in the config is `true`. | boolean |
| horizontalColor | The color of the horizontal grid lines. The value in the config is `"rgba(0, 255, 255, 0.2)"`. | color in css-compatible format |
| verticalColor | The color of the vertical grid lines. The value in the config is `"rgba(0, 255, 255, 0.2)"`. | color in css-compatible format |
| stepX | The distance between vertical grid lines, in the [ruler units](#rulersUnit). The value in the config is `0.25` in. | integer |
| stepY | The distance between horizontal grid lines, in the [ruler units](#rulersUnit). The value in the config is `0.25` in. | integer |
| lineWidthPx | The width of grid lines in pixels. The value in the config is `1`. | integer |

## Rendering

Object: [`rendering`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| hiResOutputDpi | Hi-res output resolution in dots per inch (DPI). The value in the config is `300`. | integer |
| hiResOutputFileFormat | The type of the hi-res output. The value in the config is `"pdf"`. | `"pdf"`, `"jpeg"`, `"png"`, `"tiff"` |
| hiResOutputColorSpace | The color space of the hi-res output. The value in the config is `"cmyk"`. | `"rgb"`, `"cmyk"`, `"grayscale"` |
| hiResOutputRgbColorProfileName | The name of an RGB color profile for hi-res outputs. By default, the editor uses the `sRGB IEC61966-2.1` profile to render hi-res outputs in RGB. | string |
| hiResOutputCmykColorProfileName | The name of a CMYK color profile for hi-res outputs. By default, the editor uses the `SWOP (Coated) 20%, GCR, Medium` profile to render hi-res outputs in CMYK. | string |
| hiResOutputGrayscaleColorProfileName | The name of a color profile for grayscale outputs. By default, the editor uses the `Dot Gain 30%` profile to render hi-res outputs in grayscale. | string |
| hiResOutputToSeparateFiles | If `true`, the hi-res output for each page of a multipage product is put in a separate file. The value in the config is `false`. | boolean |
| hiResOutputChannelContainersToSeparateFiles | Renders spot colors and textures to [separate PDF files](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md#channel-containers). The value in the config is `false`. | boolean |
| hiResOutputChannelContainersRenderEmptyPage | Adds [empty pages](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md#channel-containers) to PDF files when the corresponding pages of the base design have neither spot colors nor textures. The value in the config is `true`. | boolean |
| hiResOutputBackgroundColor | The background color for the hi-res output. The value in the config is `"rgba(255,255,255,0)"`. | color in css-compatible format |
| hiResOutputCompression | The type of hi-res output compression. `"jpeg"` and `"zip"` are supported for PDF files only, whereas `"lzw"` is supported for TIFF files. The value in the config is `"jpeg"`. | `"jpeg"`, `"zip"`, `"none"`, `"lzw"` |
| hiResOutputJpegCompressionQuality | JPEG compression quality in percent. This parameter makes sense only for the JPEG and PDF formats. For PDF outputs, set `hiResOutputCompression` to `"jpeg"`. The value in the config is `90`. | integer from `0` to `100`. |
| hiResOutputFlipMode | Flips hi-res outputs. The value in the config is `"none"`. | `"none"`, `"vertical"`, `"horizontal"`, `"both"` |
| hiResOutputRotateMode | Rotates hi-res outputs to the specified angle clockwise. By default, the Design Editor does not rotate the original design, and this value is `"none"`. | `"none"`, `"rotate90"`, `"rotate180"`, `"rotate270"` |
| hiResOutputInStringPlaceholderHintsEnabled | Displays hints for unfilled in-string placeholders in hi-res outputs. The value in the config is `false`. | boolean |
| hiResOutputPdfFormat | If `"X4"`, enables DeviceCMYK and does not embed any color profile into the resulting PDF file in the PDF/X-4 standard. By default, print files are generated in PDF 1.4. | `"Default"`, `"X4"` |
| hiResOutputDestinationColorProfileName | Defines the color profile name to preview CMYK colors on the canvas. To enable this preview mode, the [AutoTargetDevicePreviewMode](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/config-backend/appsettings.md#AutoTargetDevicePreviewMode) param must be `True` or not included in AppSettings.config. By default, the preview mode is enabled and uses the default destination profile. | string |
| proofImageFileFormat | The type of proof image files. The value in the config is `"jpeg"`. | `"jpeg"`, `"png"` |
| proofImageRgbColorProfileName | The name of an RGB color profile for proof images. By default, the editor uses the `sRGB IEC61966-2.1` profile to render proof images. | string |
| proofImageCropSafetyLine | The name of a safety line, which proof images are cropped to. If there is no safety line with the given name, proof images are not cropped. By default, proof images appear uncropped. | string |
| proofImageSafetyLinesEnabled | Displays safety lines on proof images. The value in the config is `true`. | boolean |
| proofImageSpineAndFoldingLinesEnabled | Displays spines and folding lines on proof images. The value in the config is `true`. | boolean |
| proofImageFlipMode | The flip mode for proof images. The value in the config is `"none"`. | `"none"`, `"vertical"`, `"horizontal"`, `"both"` |
| proofImageMockupEnabled | Displays mockups on proof images. If it is `true`, then the editor renders a mockup with a print area. If it is `false`, then the editor renders only print areas to proof images. The value in the config is `true`. | boolean |
| proofImageShowStubContent | Enables the stub images and text hints in unfilled placeholders. The value in the config is `false`. | boolean |
| proofImageInterpolationMode | An interpolation algorithm used for resizing proof images. You can find the list of supported algorithms in the specification of the [Aurigma Graphics Mill](https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_ResizeInterpolationMode.htm) library. For example, you can use `"Lanczos"`, `"NearestNeighbour"`, and others. By default, no interpolation algorithms are applied to resize proof images. | string |
| proofImageRotateMode | Rotates proof images to the specified angle clockwise. If `"auto"` | |
| proofImageRotateMode | Rotates proof images to the specified angle clockwise. If `"auto"`, rotates proof images at the same angle that the canvas is rotated. By default, the Design Editor does not rotate the original design, and this value is `"none"`. | `"none"`, `"auto"`, `"rotate90"`, `"rotate180"`, `"rotate270"` |
| proofImageInStringPlaceholderHintsEnabled | Displays hints for unfilled in-string placeholders on proof images. The value in the config is `false`. | boolean |

### PDF metadata

Object: [`rendering.hiResOutputPdfMetadata`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/tags.md)

Name | Description | Possible values

author | The author of the PDF document. | string

creator | The creator of the PDF document. | string

keywords | Keywords of the PDF document. | string

subject | The subject of the PDF document. | string

title | The title of the PDF document. | string

## Preflight Warnings

Object: [`violationWarningsSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/warnings.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| regionViolationWarningEnabled | Enables a warning displayed if an item goes out of a region. The value in the config is `true`. | boolean |
| safetyLineViolationWarningEnabled | *Outdated. Instead, define the [safetyLines](#safety-lines) object with the `"InsideAll"` mode.* Enables a warning displayed if an item crosses a safety line. The value in the config is `true`. | boolean |
| textCropViolationWarningEnabled | Enables a warning displayed if the text is too long for the bounding rectangle, and some strings are clipped. The value in the config is `true`. | boolean |
| shapeViolationsEnabled | Enables a warning displayed if the Asset Manager can import PDF and SVG vector graphics only with losses. The value in the config is `true`. | boolean |
| tolerance | The distance, in points, within which no warnings about violations of safety lines or the bleed zone will be displayed. The value in the config is `0.001`. | number |
| inPlaceNotSupportedWarningEnabled | Enables warnings displayed when text elements have properties that are not supported in the [WYSIWYG text engine](https://customerscanvas.com/docs/on-premises/design-editor/concepts/text-engines.md) and when the Classic text engine will render this text. The value in the config is `false`. | boolean |

### Safety lines

Object: `violationWarningsSettings.safetyLines`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| enabled | Enables the bleed zone validation. The value in the config is `true`. | boolean |
| mode | If `InsideAll`, a warning does not appear if the element is inside all safety lines. If `PartiallyInsideAny`, a warning does not appear if at least one safety zone contains the element. If `InsideAny`, a warning does not appear if at least one safety zone contains the element, and no safety lines intersect the element. The value in the config is `"PartiallyInsideAny"`. | `"InsideAll"`, `"PartiallyInsideAny"`, `"InsideAny"` |

### Quality meter

Object: `violationWarningsSettings.qualityMeter`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| enabled | Enables the quality meter and low DPI warnings. The value in the config is `true`. | boolean |
| **Image quality levels** | object: `violationWarningsSettings.qualityMeter.qualityLevels` | |
| warning | The warning image quality level, comparing to the hi-res output DPI, in percent. This value should be greater than or equal to the [bad](#qualityLevelsBad) value. The default is `100`. | number |
| bad | The bad image quality level, comparing to the hi-res output DPI, in percent. This value should be less than or equal to the [warning](#qualityLevelsWarning) value. The default is `50`. | number |

## Watermark

Object: [`watermark`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/watermarks.md)

### Text Parameters

Object: `watermark.text`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| text | Watermark text to display. The default text is `"watermark"`. | string |
| scale | The font size scale. This parameter specifies how much space the watermark text will occupy relative to the product size. The value in the config is `0.28`. | number |
| opacity | The opacity of the watermark text. The value in the config is `0.1`. | number |
| **Font parameters** | object: `watermark.text.fontSettings` | |
| postScriptName | The watermark font name. The value in the config is `"Roboto-Regular"`. | string |
| size | The font size of the watermark text. The value in the config is `35`. | number |
| fauxBold | Applies the faux bold effect to the watermark. The value in the config is `false`. | boolean |
| fauxItalic | Applies the faux italic effect to the watermark. The value in the config is `false`. | boolean |

### Image Parameters

Object: `watermark.image`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| name | The filename of the watermark image. This file should be uploaded to the `../assets/helpers/` folder on the server. By default, the Design Editor displays **watermark.png**. | string |
| repeat | If `false`, displays the watermark image in the center of the canvas or proof images. If `true`, repeats the image. The value in the config is `false`. | boolean |
| opacity | The opacity of the watermark image. The value in the config is `0.4`. | number |

### Watermark Visibility

Object: `watermark.visibility`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| proof | Displays the watermark on proof images. The value in the config is `false`. | boolean |
| canvas | Displays the watermark on the canvas. The value in the config is `false`. | boolean |

## Image Resize Requests

Object: `imageResizeRequestConfig`

| Name                | Description    | Possible Values |
|---------------------|----------------|-----------------|
| defaultRequestRatio | Image size increase ratio to request a new image. The value in the config is `0.5`. | number |
| rules | List of rules for image resize requests. | array |

### Image Resize Rules

Object: `imageResizeRequestRule`

| Name                | Description    | Possible Values |
|---------------------|----------------|-----------------|
| minOriginalArea   | Minimum original image area in points (width * height) for this rule to apply. The default value is `0`. | number      |
| maxOriginalArea   | Maximum original image area in points (width * height) for this rule to apply. The value in the config is `1000000`. | number      |
| requestRatio      | Image size increase ratio to request a new image for this rule. The value in the config is `0.25`.| number      |

## Widgets

Object: [widgets](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/ui-overview.md)

### Common Text Parameters

Object: `widgets.common`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| textFormattingEnabled | If `true`, the top toolbar displays the buttons for changing layer properties, and when the user double-clicks a text layer and enters the editing mode, it allows for changing the rich text format on the canvas or Rich Text editor. If `false`, the top toolbar displays buttons for both changing the layer properties and editing the text, and the user can edit text on the canvas and Object Inspector. The [`<TATF>`](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/advanced/markers.md#TATF) marker overrides this behavior for a single text layer, however, `<TATF_null>` will use the value of this parameter. The value in the config is `true`. | boolean |
| **Font size parameters** | object: `widgets.common.fontSize` | |
| max | The maximum font size. This value is used in the Rich Text dialog. Also, if you do not define font size box parameters for the Top Toolbar, then this value is applied to point text. | number |
| min | The minimum font size used in the Rich Text dialog. Also, if you do not define font size box parameters for the Top Toolbar then this value is applied to point text. | number |
| step | The step to change the font size in the Rich Text dialog. | number |
| **Tracking parameters** | object: `widgets.common.tracking` | |
| max | The maximum tracking value. The value in the config is `300`. | number |
| min | The minimum tracking value. The value in the config is `-300`. | number |
| step | The step to change the tracking value. The value in the config is `25`. | number |
| **Leading parameters** | object: `widgets.common.leading` | |
| max | The maximum leading value. The value in the config is `1296`. | number |
| min | The minimum leading value. The value in the config is `6`. | number |
| step | The step to change the leading value. The value in the config is `10`. | number |

### Toolbox

Object: [`widgets.Toolbox`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/toolbox.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| enabled | Displays the Toolbox. The value in the config is `true`. | boolean |
| buttons | Configures the Toolbox buttons. By default, the Design Editor enables the following buttons in the Toolbox: `"Text"`, `"RichText"`, `"Image"`, `"Line"`, `"Rectangle"`, `"Ellipse"`, `"QrCode"`, `"LinearBarcode"`, `"DataMatrixBarcode"`. For config examples, you can refer to the [Toolbox](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/toolbox.md) topic. This topic also describes how you can predefine properties of design elements. | array |
| containerToolboxes | Configures the Toolbox buttons for channel containers. For config examples, you can refer to the [Post Press Finishing](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers.md) topic. | array |
| insertOnTop | If `true`, each newly added image will appear on top of all the elements. If `false`, the new image will be considered the background for another image or shape on the top layer and will appear below. The value in the config is `false`. | boolean |

### Asset Manager

Object: [`widgets.AssetManager`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-manager.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| defaultTabName | The default tab is displayed when you open the Asset Manager; it should be one of the defined [tabs](#assetTabs). | string |
| enabledBackgroundChange | If `true`, allows you to open the Asset Manager to select an image for the background. In this case, when you click the background layer, both the **Color** and **Image** tabs will be available. If `false`, the Color picker will only be displayed to change the color. The value in the config is `true`. | boolean |
| maxUploadFileSize | The maximum size of files that can be uploaded through the Asset Manager, in bytes. This value must be `102400` (100 kB) or more. By default, this value is `null`, and the size of uploaded files is not limited. | number |
| saveAllowedTabAfterInsert | Allows you to restrict the image selection only to the asset tab from which an image was selected. If `true`, your users cannot open another tab. The value in the config is `false`. | boolean |
| tabs | Configures tabs available in the Asset Manager. Before configuring tabs, you must define [asset sources](#assetSources) for them. By default, the Design Editor enables only the **My files** tab. | array |

### Object Inspector

Object: `widgets.ObjectInspector`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| bgItemEnabled | Displays the background element in the Object Inspector. The value in the config is `true`. | boolean |
| dndEnabled | Enables drag-and-drop for elements in the Object Inspector. The value in the config is `true`. | boolean |
| violationWarningsEnabled | Enables preflight warnings in the Object Inspector. If `true`, notifying icons appear on low-resolution images, safety line violation, region violation, and text clipping. The value in the config is `true`. | boolean |
| variableItemsEnabled | Enables check boxes for text elements and images to select variable fields. If `true`, you can mark design elements as variable items at runtime and then personalize them in your e-commerce system. The value in the config is `false`. | boolean |
| emptyListTextEnabled | Enables text, displayed when a loaded template has no customizable layers. The value in the config is `true`. | boolean |
| position | Displays the Object Inspector from the right or left side of the canvas. The value in the config is `"Right"`. | `"Left"`, `"Right"` |
| aboveCanvasOnSmallScreenEnabled | If `true`, the Object Inspector appears above the canvas when you work on small-screen devices. Otherwise, it appears from the left side of the canvas. The value in the config is `true`. | boolean |
| isHidden | If it is `true`, then the editor hides the Object Inspector and expands the canvas to the available width. The value in the config is `false`. | boolean |
| toggleEnabled | If it is `true`, then the editor displays the **Toggle object inspector** button. The value in the config is `false`. | boolean |
| inStringPlaceholderMode | Defines the appearance of in-string placeholders in the Object Inspector. If `"Single"`, all items appear at the top of the item list. In the `"Multiple"` mode, linked in-string placeholders appear separately and keep the order defined in PSD templates. The value in the config is `"Multiple"`. | `"Single"`, `"Multiple"` |
| showItemName | Enables text labels for design elements. The value in the config is `false`. | boolean |
| groupRenameEnabled | If `true`, the user can rename group names in the Object Inspector. The value in the config is `true`. | boolean |
| groupsExpandedByDefault | If `true`, automatically expands groups in the Object Inspector when loading a product. If `false`, groups of design elements appear collapsed. The value in the config is `false`. | boolean |
| expandNestedGroups | If `true`, allows the user to expand all nested groups when clicking the parent group in the Object Inspector. If `false`, the user has to click the groups one by one to expand them all. The value in the config is `false`. | boolean |
| containerTabsEnabled | If `true`, displays the container tabs. If `false`, hides the tabs. The value in the config is `true`. For more details, refer to the [Post Press Finishing](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers.md) topic. | boolean |

### Item Menu

Object: `widgets.ItemMenu`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| objectManipulationEnabled | Enables commands for deleting and cloning items in a product. The value in the config is `true`. | boolean |
| verticalAlignmentEnabled | Enables commands for the vertical alignment of items to the safe area and group alignment (to select several items, use `Ctrl`). The value in the config is `true`. | boolean |
| horizontalAlignmentEnabled | Enables commands for the horizontal alignment of items to the safe area and group alignment (to select several items, use `Ctrl`). The value in the config is `true`. | boolean |
| changeZOrderEnabled | Enables commands for changing the Z-order of items. The value in the config is `true`. | boolean |
| renameEnabled | Enables a command to rename items. The value in the config is `false`. | boolean |
| groupItemsEnabled | If `true`, enables the **Group** and **Ungroup** commands. The value in the config is `true`. | boolean |
| cloneItemsEnabled | Enables a command to clone items on the canvas. The value in the config is `true`. | boolean |

### Top Toolbar

Object: `widgets.TopToolbar`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| alignButtonsEnabled | Displays the vertical aligment buttons. The value in the config is `true`. | boolean |
| displayAlignButtonsAsDropdown | Displays the aligment buttons as a drop-down list. The value in the config is `true`. | boolean |
| displayCaptionInButtons | Displays button captions. The value in the config is `false`. | boolean |
| historyButtonsEnabled | Displays the **Undo** and **Redo** buttons. The value in the config is `true`. | boolean |
| deleteButtonEnabled | Displays the **Delete** button. The value in the config is `false`. | boolean |
| revertButtonEnabled | Displays the **Revert** button. The value in the config is `true`. | boolean |
| layoutItemSettingsButtonEnabled | Displays the **Smart group** button to configure the auto-layout settings of grouped design elements. The value in the config is `true`. | boolean |
| displayZOrderButtonsAsDropdown | Displays the drop-down z-order buttons. The value in the config is `true`. | boolean |
| cloneButtonEnabled | Displays the **Clone object** button. The value in the config is `false`. | boolean |
| groupButtonEnabled | Displays the **Group** button for selected elements or **Ungroup** for groups. The value in the config is `true`. | boolean |
| editTextButtonEnabled | Displays the **Edit** button for text elements. The value in the config is `false`. | boolean |
| textVAlignmentButtonsEnabled | Displays the vertical text alignment buttons. The value in the config is `true`. | boolean |
| textAlignmentButtonsEnabled | Displays the text alignment buttons. The value in the config is `true`. | boolean |
| textAllowChangeColumnCount | Displays the **Columns** box for rich formatted text. The value in the config is `true`. | boolean |
| textEmphasisButtonsEnabled | Displays the faux text style buttons (**bold**, *italic*, and underlined). The value in the config is `true`. | boolean |
| textFontFamilyButtonEnabled | Displays the font list. The value in the config is `true` | boolean |
| textFontStyleButtonEnabled | Displays the font style button. The value in the config is `true`. | boolean |
| textFontSizeButtonEnabled | Displays the font size spin box. The value in the config is `true`. | boolean |
| textFontColorButtonEnabled | Displays the text color picker. The value in the config is `true`. | boolean |
| textListButtonsEnabled | Displays a group of buttons to create and manipulate lists. The value in the config is `true`. | boolean |
| textParagraphButtonEnabled | Displays the **Paragraph** button to configure paragraph indents. The value in the config is `true`. | boolean |
| textBendButtonEnabled | Displays the **Bend** button to configure arched text. The value in the config is `true`. | boolean |
| textShadowButtonEnabled | Displays the **Shadow** button. The value in the config is `true`. | boolean |
| textStrokeButtonEnabled | Displays the **Stroke** button. The value in the config is `true`. | boolean |
| textStrokeColorButtonEnabled | Displays the **Stroke color** button. If `true`, the user can change the stroke color. If `false`, the color is maintained the same as the text color. The value in the config is `true`. | boolean |
| closeFontMenuOnClickEnabled | If `true`, the **Select font** drop-down list closes after a user selects a font. Otherwise, it closes only when a user clicks anywhere outside the list. The value in the config is `true`. | boolean |
| opacitySliderEnabled | Provides the ability to change layer opacity via the **Opacity** slider in the Top Toolbar. The value in the config is `true`. | boolean |
| textLeadingButtonEnabled | Displays the text leading button. The value in the config is `true`. | boolean |
| textTrackingButtonEnabled | Displays the text tracking button. The value in the config is `true`. | boolean |
| multiRowModeEnabled | Displays the Top Toolbar menu in the multi-row mode to fit all buttons to the screen. The value in the config is `false`. | boolean |
| borderColorButtonEnabled | Displays the **Border color** button. The value in the config is `true`. | boolean |
| borderWidthButtonEnabled | Displays the **Border width** button. The value in the config is `true`. | boolean |
| overlayColorButtonEnabled | Displays the **Color overlay** button. The value in the config is `false`. | boolean |
| imageEditButtonEnabled | Displays the **Edit** button for images. The value in the config is `true`. | boolean |
| imageSelectButtonEnabled | Displays the **Select image** button for images. The value in the config is `true`. | boolean |
| placeholderEditButtonEnabled | Displays the **Edit** button for image placeholders. The value in the config is `true`. | boolean |
| placeholderSelectButtonEnabled | Displays the **Select image** button for image placeholders. The value in the config is `true`. | boolean |

### Bottom Toolbar

Object: `widgets.BottomToolbar`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| safetyLinesCheckboxEnabled | Displays the **Safety lines** command on the **Marking** menu. The value in the config is `true`. | boolean |
| gridCheckboxEnabled | Displays the **Grid** command on the **Marking** menu. The value in the config is `true`. | boolean |
| previewModeCheckboxEnabled | Displays the **Preview mode** command on the **Marking** menu. In the **Preview mode**, the Design Editor hides safety lines and the bleed and slug areas on the canvas. The value in the config is `true`. | boolean |
| snapLinesItemsCheckboxEnabled | Displays the **Snap to items** command on the **Marking** menu. The value in the config is `true`. *This parameter also supports an [ICheckboxConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#configuring-the-marking-menu) object*. | boolean |
| snapLinesPrintAreaCheckboxEnabled | Displays the **Snap to page** command on the **Marking** menu. The value in the config is `true`. *This parameter also supports an [ICheckboxConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#configuring-the-marking-menu) object*. | boolean |
| snapLinesSafetyLinesCheckboxEnabled | Displays the **Snap to safety lines** command on the **Marking** menu. The value in the config is `true`. *This parameter also supports an [ICheckboxConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#configuring-the-marking-menu) object*. | boolean |
| snapLinesInteractiveZonesCheckboxEnabled | Displays the **Snap to interactive zones** command on the **Marking** menu. The value in the config is `true`. *This parameter also supports an [ICheckboxConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/rulers-grids-snaplines.md#configuring-the-marking-menu) object*. | boolean |
| zoomValueEnabled | Enables a button displaying the current zoom level. When your users click this button, they can set a predefined zoom level or zoom the canvas to fit safety lines. The value in the config is `true`. | boolean |
| zoomButtonsEnabled | Displays the **Zoom in** and **Zoom out** buttons. The value in the config is `true`. | boolean |
| rotateButtonEnabled | Displays the **Rotate** button allowing your users to rotate the canvas at the [specified angle](#canvas-rotation) when editing their products. The value in the config is `true`. | boolean |
| fullWindowButtonEnabled | Displays the **Full window** button. The value in the config is `false`. | boolean |
| fullScreenButtonEnabled | Displays the **Full screen** button. The full-screen mode is not supported in Internet Explorer and Safari, so the related button is not displayed in these browsers even if it is enabled. The value in the config is `true`. | boolean |
| **Surface selector** | object: `widgets.BottomToolbar.surfaceSwitch` | |
| enabled | Enables the pagination control. The value in the config is `true`. | boolean |
| showThumbnails | Displays page thumbnails. The value in the config is `false`. | boolean |
| showSurfaceNames | Displays page names in the pagination control. If it is `true` and you name your product surfaces, then these names are shown in the navigation area. Otherwise, surface indexes are shown. The value in the config is `true`. | boolean |
| scrollPageButtonsEnabled | Displays the **Next** and **Previous** buttons, which allow for scrolling the page selector. The value in the config is `true`. | boolean |
| toggleSurfaceButtonsEnabled | Displays the **Next** and **Previous** buttons, which allow for switching between pages. The value in the config is `false`. | boolean |
| firstAndLastButtonsEnabled | Displays the **First** and **Last** buttons for the page navigation. The value in the config is `true`. | boolean |
| specificForSurfaceCount | Defines the pagination control for products consisting of the certain number of pages. You can find an example of using this property in the [multiple-pages](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/multiple-pages.md#navigating-in-multipage-products) topic. | object |

### Qr Code

Object: [`widgets.QrCodeDialog`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/barcodes.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| defaultType | A tab to be displayed when the QR-code dialog opens. The default tab is `"QrUrl"`. | `"QrVCard"`, `"QrUrl"`, `"QrPhone"`, `"QrData"` |
| tabs | Defines which tabs and in what order will be displayed in the QR-code dialog. The value in the config is `["QrVCard", "QrUrl", "QrPhone", "QrData"]`. | array containing any combination of `"QrVCard"`, `"QrUrl"`, `"QrPhone"`, and `"QrData"` |

### Linear Barcode

Object: [`widgets.LinearBarcodeDialog`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/barcodes.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| defaultType | The default type of a barcode, `"LinearEan8"`. | `"LinearEan8"`, `"LinearEan13"`, `"LinearUpcA"`, `"LinearUpcE"`, `"LinearCode128"` |
| autoChecksum | If `false`, allows you to enter either 7 or 8 digits in EAN-8 barcodes. In the first case, the checksum digit will be calculated automatically. In the latter case, the 8th digit must be the correct checksum. If `true`, you will only be allowed to enter 7 digits, and the checksum will be calculated automatically. The value in the config is `false`. | boolean |

### Rich Text Editor

Object: `widgets.RichTextDialog`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| applyToAllTextMode | Allows you to apply formatting to a whole text element despite a text selection. The value in the config is `false`. | boolean |
| bgColor | The text background color in the Rich Text dialog. The value in the config is `"white"`. | color in css-compatible format |
| createMultiColumnText | Allows for creating multicolumn text. If `true`, the **Columns** drop-down list appears in the Top Toolbar for rich formatted text elements. The value in the config is `false`. | boolean |
| showHint | Enables hints in the following drop-down lists: `"font"`, `"style"`, `"size"`, `"tracking"`, `"leading"`, `"firstLineIndent"`, `"paddingTop"`, `"paddingBottom"`, `"paddingLeft"`, `"paddingRight"`. By default, all properties of this object are set to `true`. | object |
| **User input boxes** | object: `widgets.RichTextDialog.showInput` | |
| size | Enables user input in the **Font size** drop-down list. The value in the config is `true`. | boolean |
| **Special characters** | object: `widgets.RichTextDialog.ckeditorConfig` | |
| specialChars | An array defining the **Special character** list. For an example and the default character list, refer to [IRichTextDialogConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IRichTextDialogConfig.md). | array |
| **Text outline parameters** | object: `widgets.RichTextDialog.textOutline` | |
| enabled | Enables text outline. The text is outlined in the Rich Text dialog if the difference between the text color and the background color is below the hue or brightness threshold. The value in the config is `false`. | boolean |
| hueThreshold | The hue threshold. The value in the config is `74`. | number |
| brightnessThreshold | The brightness threshold. The value in the config is `5`. | number |
| color | The outline color. The value in the config is `"rgba(0, 0, 0, 0.2)"`. | color in css-compatible format |
| **Rich text dialog zoom** | object: `widgets.RichTextDialog.zoom` | |
| enabled | Enables the zoom slider in the Rich Text dialog. The value in the config is `false`. | boolean |
| minZoomPct | The least value of the zoom slider, must be less than 100. The value in the config is `10`. | number |
| maxZoomPct | The most value of the zoom slider, must be more than 100. The value in the config is `500`. | number |
| **Rich text auto-zoom** | object: `widgets.RichTextDialog.autoZoom` | |
| enabled | Enables auto-zoom at opening the Rich Text dialog. The value in the config is `false`. | boolean |
| minFontSizeThresholdPt | The font size threshold in points. If the text font size is less than this threshold, the text is auto-zoomed in. The value in the config is `12`. | number |
| maxFontSizeThresholdPt | The font size threshold in points. If the text font size is more than this threshold, the text is auto-zoomed out. The value in the config is `36`. | number |

### Finish Button

Object: `widgets.FinishButton`

| Name | Description | Possible values |
| :--- | :--- | :--- |
| mode | The mode of the **Finish design** button. `"Disabled"` hides the button and enables a callback. `"Download"` is the debug mode that shows the button and disables the callback, but allows you to download the hi-res output. The value in the config is `"Disabled"`. | `"Download"`, `"Disabled"` |

### Image Editor

Object: [`widgets.ImageEditorDialog`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-editor.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| colorAdjustButtonEnabled | Displays the **Adjust** button in the Image Editor. The value in the config is `true`. | boolean |
| cropButtonEnabled | Displays the **Crop** button in the Image Editor. The value in the config is `true`. | boolean |
| backgroundEraseButtonEnabled | Displays the **Background** button in the Image Editor. The value in the config is `true`. | boolean |
| fullscreenOnTouchDevice | If `true`, the Image Editor opens in the full-screen mode on mobile devices. The value in the config is `true`. | boolean |
| imageContextMenuEnabled | If `true`, your customers will be allowed to open the context menu by right-clicking on the images they are editing. By default, this value is `true`. | boolean |

### Color Picker

Object: [widgets.ColorPicker](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/color-picker.md)

| Name | Description | Possible values |
| :--- | :--- | :--- |
| showPaletteOnly | If `true`, shows the predefined palettes and hides the color field in the Color picker. If `false`, shows both the predefined palettes and the field. The value in the config is `false`. | boolean |
| sectionCollapseEnabled | If `true`, allows users to collapse the sections of predefined palettes when they click headers of these sections in the Color picker. The value in the config is `false`. | boolean |
| colorTypeDropdownEnabled | Enables the Color type drop-down list, where your users can select between CMYK, RGB, and HEX input formats when defining their colors. The value in the config is `true`. | boolean |
| eyeDropperEnabled | Enables the eyedropeer to select colors on the canvas. The value in the config is `true`. | boolean |
| defaultColorType | The initial color input format of the Color picker. The value in the config is `"cmyk"`. | `"rgb"`, `"cmyk"`, `"hex"` |
| availableColorTypes | Specifies the color input formats that will be available to your users in the Color picker. The value in the config is `["cmyk", "rgb", "hex"]`. | array |
| paletteHintsEnabled | Displays names of color swatches. You can find an example of defining these names in the [Color Picker](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/color-picker.md#palettesection) topic. The value in the config is `true`. | boolean |
| cmykDecimalsEnabled | Displays decimal places for CMYK values. If `true`, the Color picker displays the first decimal place in the CMYK color fields. Otherwise, CMYK values are displayed as integers. The value in the config is `false`. | boolean |
| colorSpace | *Outdated, use [defaultColorType](#defaultColorType) instead. When both `colorSpace` and `defaultColorType` are defined, then `colorSpace` will be applied.* The color space which the user can select a swatch from. The value in the config is `"cmyk"`. | `"rgb"`, `"cmyk"` |
| colorSpaceDropdownEnabled | *Outdated, use [colorTypeDropdownEnabled](#colorTypeDropdownEnabled) instead. When both `colorSpaceDropdownEnabled` and `colorTypeDropdownEnabled` are defined, then `colorSpaceDropdownEnabled` will be applied.* Enables the Color space drop-down list, where your users can select between CMYK and RGB palettes when defining their colors. The value in the config is `false`. | boolean |
| **Sections of color swatches** | array: [widgets.ColorPicker.sections](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/color-picker.md#configuring-palettes) | |
| type | The palette type. | `"NoColorSection"`, `"RecentSection"`, `"ThemeSection"`, `"PaletteSection"` |
| translationKey | The palette name. You can use either a string or an identifier of a string defined in the **~\Configuration\translations.json** file. | string |
| viewType | The appearance of the palette. The value in the config is `"Block"`. | `"Block"`, `"Line"` |
| targets | An item property that you can specify a color for. The value in the config is `["All"]`. | array containing any combination of `"All"`, `"Background"`, `"Border"`, `"Fill"`, `"Line"`, `"RichText"`, `"Shadow"`, `"Stroke"`, `"Text"` |
| palette | The predefined palette displayed in the color picker. The value in the config is `[["cmyk(0%,100%,100%,0%,100%)", "cmyk(0%,0%,100%,0%,100%)",...],...]` | two-dimensional array: array of palettes, where each pallete is an array of colors in css-compatible format |