This is an old documentation. Go to the latest Customer's Canvas docs

clientConfig.json

The ~\Configuration\clientConfig.json configuration file allows you to specity settings of the Design Editor. This topic describes how you can configure this web-to-print editor.

Note

The default measurement units in Customer's Canvas 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.

The clientConfig.json file contains the following settings. You can click a setting name to get its description.

JSON
{
    "spellCheckEnabled": true,
    "initialMode": "Simple",
    "fontList": { "appFonts": ["*"] },
    "fontListMode": "Advanced",
    "assetSources": { ... },
    "defaultLanguage": "en",
    "loadUserInfoButtonEnabled": false,
    "autoLoadUserInfo": true,
    "createGroupsAs": "smart",
    "revertProductConfirmationEnabled": true,
    "imageEditorEnabled": true,
    "deleteItemConfirmationEnabled": true,
    "restoreProductOnReloadEnabled": false,
    "alignToSafetyLineName": "bleed",
    "variableItemsMaskSymbol": "%",
    "canvasOnlyMode": false,
    "defaultProductTheme": "",
    "productThemes": null,
    "themeConfiguration": null,
    "canvas": {
        "containerColor": "#fff",
        "color": "#fff",
        "shadowEnabled": false,
        "paddingPct": 5,
        "maskedPlaceholderUnderscoreEnabled": true,
        "suppressOutOfRegionManipulation": true,
        "violationWarningButtonsEnabled": true,
        "qualityChangeContainersEnabled": true,
        "floatingItemToolbarEnabled": true,
        "autoItemSelectionEnabled": true,
        "autoPlaceholderEditModeEnabled": false,
        "gridVisible": false,
        "safetyLinesVisible": true,
        "snapLinesVisible": true,
        "canvasItemHoverEnabled": false,
        "historySize": 10,
        "pinchZoomEnabled": true,
        "textEditor": "default",
        "zoom": {
            "min": 0.01,
            "max": 16,
            "step": 0.25
        },
        "rulers": {
            "enabled": true,
            "unit": "inch",
            "customUnitScale": "1",
            "origin": "{ "X": 0, "Y": 0 }"
        },
        "rotation": {
            "type": "Rotate90"
        },
        "snapLines": {
            "items": {
                "enabled": true,
                "color": "rgb(255,0,255)",
                "tolerance": 5,
                "priority": 0,
                "initialValue": true
            }
        },
        "printZone": {
            "bleed": {
                "color": "rgba(255,0,0,1)",
                "altColor": "rgba(255,0,0,0)",
                "step": 5,
                "width": 1
            }
        },
        "handlers": {
            "placeholderEditingViewMode": "overlay"
        }
    },
    "defaultItemsConfig": {
        "barcode": null,
        "ellipse": null,
        "image": null,
        "line": null,
        "placeholder": null,
        "rectangle": null,
        "richText": null,
        "shape": null,
        "text": null
    },
    "grid": {
        "enabled": true,
        "horizontalColor": "rgba(0, 255, 255, 0.2)",
        "verticalColor": "rgba(0, 255, 255, 0.2)",
        "stepX": 0.25,
        "stepY": 0.25,
        "lineWidthPx": 1
    },
    "rendering": {
        "hiResOutputDpi": 300,
        "hiResOutputFileFormat": "pdf",
        "hiResOutputColorSpace": "cmyk",
        "hiResOutputRgbColorProfileName": "",
        "hiResOutputCmykColorProfileName": "",
        "hiResOutputGrayscaleColorProfileName": "",
        "hiResOutputToSeparateFiles": false,
        "hiResOutputChannelContainersToSeparateFiles": false,
        "hiResOutputChannelContainersRenderEmptyPage": true,
        "hiResOutputBackgroundColor": "rgba(255,255,255,0)",
        "hiResOutputCompression": "jpeg",
        "hiResOutputJpegCompressionQuality": 90,
        "hiResOutputFlipMode": "none",
        "hiResOutputRotateMode": "none",
        "hiResOutputPdfMetadata": {
            "author": "",
            "creator": "",
            "keywords": "",
            "subject": "",
            "title": ""
        },
        "hiResOutputInStringPlaceholderHintsEnabled": false,
        "proofImageFileFormat": "jpeg",
        "proofImageRgbColorProfileName": "",
        "proofImageCropSafetyLine": "",
        "proofImageSafetyLinesEnabled": true,
        "proofImageSpineAndFoldingLinesEnabled": true,
        "proofImageFlipMode": "none",
        "proofImageMockupEnabled": true,
        "proofImageShowStubContent": false,
        "proofImageInterpolationMode": null,
        "proofImageRotateMode": "none",
        "proofImageInStringPlaceholderHintsEnabled": false
    },
    "violationWarningsSettings": {
        "regionViolationWarningEnabled": true,
        "safetyLineViolationWarningEnabled": true,
        "textCropViolationWarningEnabled": true,
        "shapeViolationsEnabled": true,
        "inPlaceNotSupportedWarningEnabled": false,
        "tolerance": 0.001,
        "safetyLines": {
            "enabled": true,
            "mode": "PartiallyInsideAny"
        },
        "qualityMeter": {
            "enabled": true,
            "qualityLevels": {
                "warning": 100,
                "bad": 50
            }
        }
    },
    "watermark": {
        "text": {
            "text": "watermark",
            "fontSettings": {
                "postScriptName": "Roboto-Regular",
                "size": 35,
                "fauxBold": false,
                "fauxItalic": false
            },
            "scale": 0.28,
            "opacity": 0.1
        },
        "image": {
            "name": "watermark.png",
            "repeat": false,
            "opacity": 0.4
        },
        "visibility": {
            "proof": false,
            "canvas": false
        }
    },
    "widgets": {
        "common": {
            "textFormattingEnabled": true,
            "fontSize": {
                "max": 1296,
                "min": 4,
                "step": 10
            },
            "tracking": {
                "max": 300,
                "min": -300,
                "step": 25
            },
            "leading": {
                "max": 1296,
                "min": 6,
                "step": 10
            }
        },
        "Toolbox": {
            "buttons": [...],
            "disabled": false
        },
        "AssetManager": {
            "defaultTabName": "",
            "maxUploadFileSize": null,
            "saveAllowedTabAfterInsert": false,
            "tabs": [...]
        },
        "ObjectInspector": {
            "bgItemEnabled": true,
            "dndEnabled": true,
            "violationWarningsEnabled": true,
            "variableItemsEnabled": false,
            "emptyListTextEnabled": true,
            "position": "Right",
            "aboveCanvasOnSmallScreenEnabled": true,
            "isHidden": false,
            "toggleEnabled": false,
            "inStringPlaceholderMode": "Multiple",
            "showItemName": false,
            "groupRenameEnabled": true,
            "groupsExpandedByDefault": false,
            "expandNestedGroups": false
        },
        "ItemMenu": {
            "objectManipulationEnabled": true,
            "verticalAlignmentEnabled": true,
            "horizontalAlignmentEnabled": true,
            "changeZOrderEnabled": true,
            "renameEnabled": false
        },
        "TopToolbar": {
            "alignButtonsEnabled": true,
            "displayAlignButtonsAsDropdown": true,
            "displayCaptionInButtons": false,
            "historyButtonsEnabled": true,
            "deleteButtonEnabled": false,
            "revertButtonEnabled": true,
            "layoutItemSettingsButtonEnabled": true,
            "displayZOrderButtonsAsDropdown": true,
            "cloneButtonEnabled": false,
            "editTextButtonEnabled": false,
            "textVAlignmentButtonsEnabled": true,
            "textAlignmentButtonsEnabled": true,
            "textAllowChangeColumnCount": true,
            "textEmphasisButtonsEnabled": true,
            "textFontFamilyButtonEnabled": true,
            "textFontStyleButtonEnabled": true,
            "textFontSizeButtonEnabled": true,
            "textFontColorButtonEnabled": true,
            "textParagraphButtonEnabled": true,
            "textShadowButtonEnabled": true,
            "textStrokeButtonEnabled": true,
            "closeFontMenuOnClickEnabled": true,
            "opacitySliderEnabled": true,
            "textLeadingButtonEnabled": true,
            "textTrackingButtonEnabled": true,
            "multiRowModeEnabled": false,
            "borderColorButtonEnabled": true,
            "borderWidthButtonEnabled": true,
            "imageEditButtonEnabled": true,
            "imageSelectButtonEnabled": true,
            "placeholderEditButtonEnabled": true,
            "placeholderSelectButtonEnabled": true,
            "placeholderScaleButtonEnabled": true,
            "placeholderResetContentButtonEnabled": true,
            "changeBarcodeTypeButtonEnabled": true,
            "barcodeColorButtonEnabled": true,
            "placeInSafetyAreaButtonEnabled": true,
            "fontPreviewSize": 17,
            "textStroke": { "max": 5, "min": 0.01, "step": 0.01 },
            "textShadow": {
                "angle": { "max": 360, "min": 0, "step": 15 },
                "distance": { "max": null, "min": 0, "step": 0.1 },
                "size": { "max": null, "min": 0, "step": 0.1 }
            },
            "fontSize": {
                "max": 100,
                "min": 4,
                "step": 0.5
            },
            "zOrder": {
                "zOrderLevelButtonsEnabled": true,
                "zOrderSendToButtonsEnabled": true
            }
        },
        "BottomToolbar": {
            "safetyLinesCheckboxEnabled": true,
            "gridCheckboxEnabled": true,
            "previewModeCheckboxEnabled": true,
            "snapLinesItemsCheckboxEnabled": true,
            "snapLinesPrintAreaCheckboxEnabled": true,
            "snapLinesSafetyLinesCheckboxEnabled": true,
            "zoomValueEnabled": true,
            "zoomButtonsEnabled": true,
            "rotateButtonEnabled": true,
            "fullWindowButtonEnabled": false,
            "fullScreenButtonEnabled": true,
            "surfaceSwitch": {
                "enabled": true,
                "showThumbnails": false,
                "showSurfaceNames": true,
                "scrollPageButtonsEnabled": true,
                "toggleSurfaceButtonsEnabled": false,
                "firstAndLastButtonsEnabled": true,
                "specificForSurfaceCount": { }
            }
        },
        "QrCodeDialog": {
            "defaultType": "QrUrl"
        },
        "LinearBarcodeDialog": {
            "defaultType": "LinearEan8"
        },
        "RichTextDialog": {
            "applyToAllTextMode": false,
            "bgColor": "white",
            "createMultiColumnText": false,
            "showHint": {"font": true, "style": true, ...},
            "showInput": {
                "size": true
            },
            "ckeditorConfig": {
                "specialChars": ["!", """, "#", "$", "%", "&", ...]
            },
            "textOutline": {
                "enabled": false,
                "hueThreshold": 74,
                "brightnessThreshold": 5,
                "color": "rgba(0, 0, 0, 0.2)"
            },
            "zoom": {
                "enabled": false,
                "minZoomPct": 10,
                "maxZoomPct": 500,
                "autoZoom": {
                    "enabled": false,
                    "minFontSizeThresholdPt": 12,
                    "maxFontSizeThresholdPt": 36
                }
            }
        },
        "FinishButton": {
            "mode": "Download"
        },
        "ImageEditorDialog": {
            "colorAdjustButtonEnabled": true,
            "cropButtonEnabled": true,
            "backgroundEraseButtonEnabled": true,
            "fullscreenOnTouchDevice": true
        },
        "ColorPicker": {
            "showPaletteOnly": false,
            "sectionCollapseEnabled": false,
            "colorSpace": "cmyk",
            "colorSpaceDropdownEnabled": true,
            "paletteHintsEnabled": true,
            "cmykDecimalsEnabled": false,
            "sections": [{
                "type": "PaletteSection",
                "translationKey": "Default",
                "viewType": "Block",
                "targets": ["All"],
                "palette": [["cmyk(0%,100%,100%,0%,100%)","cmyk(0%,0%,100%,0%,100%)",...],...]
            }]
        }
    }
}

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 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 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 Configuration of asset sources available in the Asset Manager. By default, only the private user gallery is defined. For config examples, you can refer to The Asset Manager topic. object
defaultLanguage The default interface language. The value in the config is "en". string
loadUserInfoButtonEnabled Displays the Load my info button. The value in the config is false. boolean
autoLoadUserInfo 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 button. The value in the config is "smart". "smart", "base"
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 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 IProductThemeConfig 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 IProductThemeConfig 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 topic. object

Canvas

Object: canvas

Name Description Possible values
containerColor The color of the HTML element placed under the canvas. The value in the config is "#fff". color in css-compatible format
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 it is set to 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 of the text layer 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 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 design elements on the canvas by 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 on image placeholders. 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 design elements. The value in the config is false. boolean
historySize The number of actions in the Design Editor that can be reverted by using the Undo button. The value in the config is 10. To avoid overusing client resources, it is 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. The "default" mode enables an editor depending on the desktop or mobile platform (TextWhizz or HTML); "html" enables an HTML-based editor, which allows you to use the Input Method Editor; "none" enables the Classic editor with popup-boxes and the Rich text editor. "default", "html", "none"
Canvas Zoom
object: zoom
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: rulers
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. This parameter is applied only if the unit parameter described above 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 coordinates are measured in the units specified by the unit parameter. The value in the config is { "X": 0, "Y": 0 }. object
Canvas Rotation
object: rotation
type The angle to which the canvas is rotated when clicking the Rotate button in the Bottom Toolbar. The value in the config is "Rotate90". "Rotate90", "Rotate180", "Rotate270"

Snap Lines

object: snapLines
The snap line type
objects: items, printArea, safetyLines
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, a snap line with the highest priority is displayed on the canvas. The higher this value, the higher the priority. The value in the config is 0. number
initialValue The initial value of the Bottom Toolbar check box that controls whether display snap lines of this type or not. The value in the config is true. boolean

Bleed and Trim Lines

object: printZone
The bleed line type
objects: bleed or trim
color The main color of lines. The value in the config is "rgb(255,0,0)". color in css-compatible format
altColor The alternative color. The value in the config is "rgba(255,0,0,0)". color in css-compatible format
step The step of dashed lines, in pixels. The value in the config is 5. number
width The width of dashed lines, in pixels. The value in the config is 1. number
Item processing rules
object: handlers
placeholderEditingViewMode Defines how the product will appear on the canvas when editing image placeholders. If "normal", the content that is outside its image placeholder appears transparent when the placeholder is in the edit mode. The "overlay" 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 "overlay". "overlay", "normal"

Default Parameters

Object: defaultItemsConfig

Name Description Possible values
barcode Default parameters of barcodes, which users add to the canvas. For an example, you can refer to the IBarcodeDefaultConfig topic. object
ellipse Default parameters of ellipses, which users add to the canvas. For an example, you can refer to the IEllipseItemDefaultConfig topic. object
image Default parameters of images, which users add to the canvas. For an example, you can refer to the IImageItemDefaultConfig topic. object
line Default parameters of lines, which users add to the canvas. For an example, you can refer to the ILineItemDefaultConfig topic. object
placeholder Default parameters of placeholders, which users add to the canvas. For an example, you can refer to the IPlaceholderItemDefaultConfig topic. object
rectangle Default parameters of rectangles, which users add to the canvas. For an example, you can refer to the IRectangleItemDefaultConfig topic. object
richText Default parameters of rich formatted texts, which users add to the canvas. For an example, you can refer to the IRichTextConfig topic. object
shape Default parameters of shapes, which users add to the canvas. For an example, you can refer to the IShapeItemDefaultConfig topic. object
text Default parameters of texts, which users add to the canvas. For an example, you can refer to the ITextConfig topic. object

Grid

Object: grid

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. The value in the config is 0.25 in. integer
stepY The distance between horizontal grid lines, in the ruler units. 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

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. The value in the config is false. boolean
hiResOutputChannelContainersRenderEmptyPage Adds empty pages 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 it should be used along with hiResOutputCompression="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
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 library. For example, you can use "Lanczos", "NearestNeighbour", and others. By default, no interpolation algorithms are applied to resize proof images, and this value is null. string
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: hiResOutputPdfMetadata
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

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 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
inPlaceNotSupportedWarningEnabled Enables warnings displayed when text elements have properties that are not supported in the WYSIWYG text engine and when the Classic text engine will render this text. The value in the config is false. 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

Safety lines

object: safetyLines
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"

The quality meter

object: qualityMeter
enabled Enables the quality meter and low DPI warnings. The value in the config is true. boolean
Image quality levels
object: 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 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 value. The default is 50. number

Watermark

Object: watermark

Name Description Possible values

Text Parameters

object: text
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: 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: image
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: visibility
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

Widgets

Object: widgets

Name Description Possible values

Common Text Parameters

object: common
textFormattingEnabled If true, allows for changing the rich text format. This parameter is applied to text layers with the <TATF_null> marker. The value in the config is true. boolean
Font size parameters
object: 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: 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: 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: Toolbox
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 Customizing the Toolbox topic. The Custom Design Elements topic describes how you can predefine design elements in the Toolbox. array
disabled Hides the Toolbox. The value in the config is false. boolean

Asset Manager

object: AssetManager
defaultTabName The default tab is displayed when you open the Asset Manager; it should be one of the defined tabs. string
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 for them. By default, the Design Editor enables only the My files tab. array

Object Inspector

object: ObjectInspector
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". For details, see the In-String Placeholders and Text Validation topic. "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

Item Menu

object: ItemMenu
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

Top Toolbar

object: TopToolbar
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
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
textParagraphButtonEnabled Displays the Paragraph button to configure paragraph indents. 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
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
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
placeholderScaleButtonEnabled Displays the Select placeholder content scale button for image placeholders. The value in the config is true. boolean
placeholderResetContentButtonEnabled Displays the Reset placeholder content button for image placeholders. The value in the config is true. boolean
changeBarcodeTypeButtonEnabled Displays the Change barcode type button. The value in the config is true. boolean
barcodeColorButtonEnabled Displays the Barcode color button. The value in the config is true. boolean
placeInSafetyAreaButtonEnabled Displays the Place in button to fit the selected design elements to an area bounded by safety lines. The value in the config is true. boolean
fontPreviewSize The font size used to display font names in the Select font list. The value in the config is 17. number
textStroke The Stroke dialog parameter, the width of the text stroke, in points. You can define the max, min, and step values. The default values are calculated based on the text font size. number
Shadow dialog parameters
object: textShadow
angle The angle of the text shadow, in degrees. You can define the max, min, and step values. number
distance The offsets of the text shadow, in points. You can define the max, min, and step values. The default values are calculated based on the text font size. number
size The size of the shadow blur, in pixels. You can define the max, min, and step values. The default values are calculated based on the text font size. number
Font size box parameters
object: fontSize
max The maximum font size. The value in the config is 100. number
min The minimum font size. The value in the config is 4. number
step The step for changing a font size when using the spin box. The value in the config is 0.5. number
Z-order control parameters
object: zOrder
zOrderLevelButtonsEnabled Enables the Level up and Level down buttons. The value in the config is true. boolean
zOrderSendToButtonsEnabled Enables the Send to front and Send to bottom buttons. The value in the config is true. boolean

Bottom Toolbar

object: BottomToolbar
safetyLinesCheckboxEnabled Displays the Safety lines check box on the Marking menu. The value in the config is true. boolean
gridCheckboxEnabled Displays the Grid check box on the Marking menu. The value in the config is true. boolean
previewModeCheckboxEnabled Displays the Preview mode check box 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 check box on the Marking menu. The value in the config is true boolean
snapLinesPrintAreaCheckboxEnabled Displays the Snap to page check box on the Marking menu. The value in the config is true boolean
snapLinesSafetyLinesCheckboxEnabled Displays the Snap to safety lines check box on the Marking menu. The value in the config is true boolean
zoomValueEnabled Displays the current zoom level. 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 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: 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 Multipage Products topic. object

Qr Code Dialog

object: QrCodeDialog
defaultType The default type of a QR code, "QrUrl". "QrVCard", "QrUrl", "QrPhone"

Linear Barcode Dialog

object: LinearBarcodeDialog
defaultType The default type of a barcode, "LinearEan8". "LinearEan8", "LinearEan13", "LinearUpcA", "LinearUpcE", "LinearCode128"

Rich Text Dialog

object: RichTextDialog
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". For a config example, you can refer to the Rich Text Editor topic. By default, all properties of this object are set to true. object
User input boxes
object: showInput
size Enables user input in the Font size drop-down list. The value in the config is true. boolean
Special characters
object: ckeditorConfig
specialChars An array defining the Special character list. For an example and the default character list, refer to IRichTextDialogConfig. array
Text outline parameters
object: 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: 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: 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: FinishButton
mode The mode of the Finish design button. "Disabled" hides the button and enables the callback that could be handled like it is discussed in the Introducing the IFrame API topic. "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 "Download". "Download", "Disabled"

Image Editor

object: ImageEditorDialog
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

Color Picker

object: ColorPicker
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
colorSpace The color space which the user can select a swatch from. The value in the config is "cmyk". "rgb", "cmyk"
colorSpaceDropdownEnabled 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
paletteHintsEnabled Displays names of color swatches. You can find an example of defining these names in the Color Picker 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
Sections of color swatches
array: sections
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

See Also

Manual

IFrame API Reference