---
title: "Interface: IStateSurfaces | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IStateSurfaces/"
---

# Interface: IStateSurfaces

> A structure holding a state file name and an array of surface names.

## Example

``` js
let product = await editor.getProduct();

// Add the first three pages from the state file to the product.
await product.addSurfaces({ 
    stateId: "3c040958-bfa8-4a3e-b3af-cff9257e7fa1",
    surfaces: ["0", "surface_1", "surface_2"]
})
// If an error occurred while adding pages to the product.
.catch(error => console.error("Adding surfaces failed with exception: ", error));
```

## Properties

### stateId

> **stateId**: `string`

The name of a state file.

***

### surfaces?

> `optional` **surfaces?**: `string`[]

An array of surface names or indexes starting from `0`. When you skip this array, all pages of the state file are added to a product.

***

### name?

> `optional` **name?**: `string`

A new name of surfaces.