## 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: 'My element
', // 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]
* [getAllWrappers][4]
* [getMain][5]
* [remove][6]
* [select][7]
* [getSelected][8]
[Page]: page.html
[Component]: component.html
## select
Select the page.
Type: [boolean][9]
## getAll
Get all pages
### Examples
```javascript
const arrayOfPages = pageManager.getAll();
```
Returns **[Array][10]<[Page]>**
## add
Add new page
### Parameters
* `props` **[Object][11]** Page properties
* `opts` **[Object][11]?** 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: 'My element
', // or a JSON of components
});
```
Returns **[Page]**
## remove
Remove page
### Parameters
* `page` **([String][12] | [Page])** Page or page id
* `opts` **any** (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]** Removed Page
## get
Get page by id
### Parameters
* `id` **[String][12]** 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]**
## getAllWrappers
Get wrapper components (aka body) from all pages and frames.
### Examples
```javascript
const wrappers = pageManager.getAllWrappers();
// Get all `image` components from the project
const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
```
Returns **[Array][10]<[Component]>**
## select
Change the selected page. This will switch the page rendered in canvas
### Parameters
* `page` **([String][12] | [Page])** Page or page id
* `opts` **SetOptions** (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]: #getallwrappers
[5]: #getmain
[6]: #remove
[7]: #select
[8]: #getselected
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String