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

# swapSurfaces

> Swaps two surfaces (pages) in the loaded product. This command is an equivalent of the [swapSurfaces](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md#swapsurfaces) method of the IFrame API.

## Params

- `lhsSurface` - the first surface (page) to swap.
- `rhsSurface` - the second surface (page) to swap.

## Example

Let's look at how you can swap the first page of the loaded product with the second page.

```json
{
    "type": "design-editor",
    "name": "editor",
    "params": {
        "initial": { ... },
        "swapSurfaces": [{
            "lhsSurfaceIndex": 0,
            "rhsSurfaceIndex": 1
        }]
    }
}
```