---
title: "setSurfaces | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/design-editor-commands/set-surfaces/"
---

# setSurfaces

> Replaces a product in the editor by using surface definitions. This command is an equivalent of the [setSurfaces](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md#setsurfaces) method from the IFrame API.

## Params

- `surfaces` - an array of the new surfaces.

For the complete list of parameters, you can refer to [ISetSurfacesOptions](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#isetsurfacesoptions).

## Example

```json
{
    "type": "design-editor",
    "name": "editor",
    "params": {
        "initial": { ... },
        "setSurfaces": {
            "surfaces": [{
                "{{ #if $['editor'].stateId !== '' }}": {
                    "stateId": "{{ $['editor'].stateId }}",
                    "surface": 0
                }
            }]
        }
    }
}
```