---
title: "au-widget-design-editor/Commands/change-mockup-command | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.change-mockup-command/"
---

# au-widget-design-editor/Commands/change-mockup-command

> A command that changes mockup images in the editor.

## Classes

### ChangeMockupCommand

For details, you can refer to the `IDesignEditorDefinitionChangeMockup`.
```json
{
  "widgets": [{
    "type": "design-editor", 
    "name": "editor",
    "params": {
      "inital": { ... }, 
      "changeMockup": {
        "data": [{
          "mockup": {
            "down": "{{$['color']._.props.mockup}}"
          },
          "previewMockups": "{{$['color']._.props.previews}}" 
        }]
      }
    }
  }]
}
```

#### Extends

- [`DesignEditorWidgetCommand`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.command.md#abstract-designeditorwidgetcommand)

#### Methods

##### execute()

```ts
execute(params): Promise<any>;
```

Executes this command.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `params` | [`IDesignEditorDefinitionChangeMockup`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditordefinitionchangemockup) | Parameters for the command. |

###### Returns

`Promise`\<`any`\>

###### Overrides

[`DesignEditorWidgetCommand`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.command.md#abstract-designeditorwidgetcommand).[`execute`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.command.md#execute)