Command: initial

Initializes the DesignEditor widget. You must always specify this command when using the DesignEditor.

Important: It is highly discouraged to make this command dynamic (as it will cause a "hard reload" of the product in the editor).

If you are familiar with the Customer's Canvas IFrame API, it is very similar to the CustomersCanvas.IframeApi.loadEditor() method.


  • productDefinition - a list of pages (surfaces) and PSD/IDML templates to open. For more details, see product definitions.
  • editorConfig - the configuration of the editor. For more details, see the Customer's Canvas configuration.
  • maximizeAssetManager - an optional Boolean value defining whether the Asset Manager dialog box is maximized in the browser. The default value is false.

In the viewerSettings command, you can also define zoom parameters unavailable through the editorConfig:

  • zoomMode - auto-zoom mode. Possible values are: none, bestFit, bestFitShrinkOnly, fitToWidth, fitToHeight, zoomControl, fitToWidthShrinkOnly, and fitToHeightShrinkOnly.
  • zoom - zoom level as a number (1 = 100%).
  • scrollPosition - scroll position as an object like {x: number, y: number}.


    "name": "design-editor",
    "type": "design-editor",
    "params": {  
        "initial": {  
            "productDefinition": {  
                "surfaces": [{
                    "printAreas": [{
            "editorConfig": {
                "canvas": {
                    "containerColor": "#fff",
                    "color": "#fff",
                    "shadowEnabled": true,
                    "rulers": {
                        "enabled": false
                "fontList": {
                    "appFonts": ["*"]
                "initialMode": "SimpleOnly",
                "restoreProductOnReloadEnabled": false,
                "widgets": {
                    "ObjectInspector": {
                        "position": "Right",
                        "bgItemEnabled": false
                    "FinishButton": {
        "viewerSettings": {
            "zoom": 1,
            "scrollPosition": { "x": 0, "y": 0 }