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

# Interface: IStateSurface

> A structure holding a state file name and a surface name or a surface index.

## Example

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

// Add the third page from the state file.
await product.addSurface({ 
    stateId: "3c040958-bfa8-4a3e-b3af-cff9257e7fa1",
    surface: "2"
})
// If an error occurred while adding the page to the product.
.catch(error => console.error("Adding surfaces failed with exception: ", error));
```

## Properties

### stateId

> **stateId**: `string`

The name of a state file.

***

### surface?

> `optional` **surface?**: `string`

Either name or index of a surface to be added to your product. The surface indexes start from `0`. By default, the first page is added to a product.

***

### name?

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

A new name of surface.