<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Pages

You can customize the initial state of the module from the editor initialization

```js
const editor = grapesjs.init({
 ....
 pageManager: {
   pages: [
     {
       id: 'page-id',
       styles: `.my-class { color: red }`, // or a JSON of styles
       component: '<div class="my-class">My element</div>', // or a JSON of components
     }
  ]
 },
})
```

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

```js
const pageManager = editor.Pages;
```

## Available Events

-   `page:add` - Added new page. The page is passed as an argument to the callback
-   `page:remove` - Page removed. The page is passed as an argument to the callback
-   `page:select` - New page selected. The newly selected page and the previous one, are passed as arguments to the callback
-   `page:update` - Page updated. The updated page and the object containing changes are passed as arguments to the callback
-   `page` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback

## Methods

-   [add][1]
-   [get][2]
-   [getAll][3]
-   [getMain][4]
-   [remove][5]
-   [select][6]
-   [getSelected][7]

## add

Add new page

### Parameters

-   `props` **[Object][8]** Page properties
-   `opts` **[Object][8]?** Options (optional, default `{}`)

### Examples

```javascript
const newPage = pageManager.add({
 id: 'new-page-id', // without an explicit ID, a random one will be created
 styles: `.my-class { color: red }`, // or a JSON of styles
 component: '<div class="my-class">My element</div>', // or a JSON of components
});
```

Returns **Page** 

## remove

Remove page

### Parameters

-   `page` **([String][9] | Page)** Page or page id
-   `opts`   (optional, default `{}`)

### Examples

```javascript
const removedPage = pageManager.remove('page-id');
// or by passing the page
const somePage = pageManager.get('page-id');
pageManager.remove(somePage);
```

Returns **Page** 

## get

Get page by id

### Parameters

-   `id` **[String][9]** Page id

### Examples

```javascript
const somePage = pageManager.get('page-id');
```

Returns **Page** 

## getMain

Get main page (the first one available)

### Examples

```javascript
const mainPage = pageManager.getMain();
```

Returns **Page** 

## getAll

Get all pages

### Examples

```javascript
const arrayOfPages = pageManager.getAll();
```

Returns **[Array][10]&lt;Page>** 

## select

Change the selected page. This will switch the page rendered in canvas

### Parameters

-   `page` **([String][9] | Page)** Page or page id
-   `opts`   (optional, default `{}`)

### Examples

```javascript
pageManager.select('page-id');
// or by passing the page
const somePage = pageManager.get('page-id');
pageManager.select(somePage);
```

Returns **this** 

## getSelected

Get the selected page

### Examples

```javascript
const selectedPage = pageManager.getSelected();
```

Returns **Page** 

[1]: #add

[2]: #get

[3]: #getall

[4]: #getmain

[5]: #remove

[6]: #select

[7]: #getselected

[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
