A structure containing the web-to-print editor configuration. Extends IClientConfiguration.

    // Defining the editor configuration.
    configuration = {
        canvas: {
            color: "white"
        grid: {
            stepX: 0.5,
            stepY: 0.5
        initialMode: "Advanced",
        rendering: {
            proofImageMockupEnabled: false
        userInfo: {
            "FirstName": "John",
            "LastName": "Doe",
            "Phone": "1234567890"
        widgets: {
            ObjectInspector: {
                dndEnabled: false

    // Loading the editor with the given configuration.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration).then(function(e) {editor = e});


Optional alignToSafetyLineName

alignToSafetyLineName: string

Optional arbitraryResizeForImageItemEnabled

arbitraryResizeForImageItemEnabled: boolean

Optional autoLoadUserInfo

autoLoadUserInfo: boolean

Optional canvas

canvas: ICanvasConfig

Optional customStyle

customStyle: string

A name of a CSS file (without extension) that will be loaded within the designer page; the file should be located in the ~/Configuration/customCss/ folder.

Optional defaultLanguage

defaultLanguage: string

Optional deleteItemConfirmationEnabled

deleteItemConfirmationEnabled: boolean

Optional fontList

fontList: string [] | object

A list of fonts available for a user in the editor; all these fonts should be uploaded to the font folder on server, by default it is ~/Fonts/. See the Custom Fonts topic for details.

Optional fontListMode

fontListMode: FontListModeType

Optional galleryOnly

galleryOnly: boolean

Optional grid

Optional imageEditorEnabled

imageEditorEnabled: boolean

Optional initialMode

initialMode: ModelModeType

Optional loadUserInfoButtonEnabled

loadUserInfoButtonEnabled: boolean

Optional newImageName

newImageName: string

Optional perSurfaceConfiguration

perSurfaceConfiguration: IPerSurfaceConfiguration

Optional preloader

preloader: object

An object that sets up the embedded preloader of Customer's Canvas.

preloader declaration

  • Optional enabled?: boolean

    Enables the embedded preloader of Customer's Canvas. If it is "false", then you can implement your own preloader, for example, as The Product Loading Screen topic describes. The default value is "true".

  • Optional errorMessage?: string

    This message shows when an error occurs. If it is not set, then "Initialization error." message shows by default.

  • Optional firstTimeMessage?: string

    This message shows when a product is being loaded for the first time. If it is not set, then "The product is being configured for the first time. It may take a while." message shows by default.

Optional rendering

rendering: IRenderingConfig

Optional restoreProductOnReloadEnabled

restoreProductOnReloadEnabled: boolean

Optional revertProductConfirmationEnabled

revertProductConfirmationEnabled: boolean

Optional spellCheckEnabled

spellCheckEnabled: boolean

Optional theme

theme: string

Name of a theme. Possible values are "BootstrapDefault", "BootstrapEmpty", or "Md". The default value is "Md".

Optional userId

userId: string

The identifier of the user who currently works with the editor.

Optional userInfo

userInfo: object

Data to populate the loaded product template with.

userInfo declaration

  • [key: string ]: string

Optional widgets

widgets: IWidgetsConfig