diff --git a/docs/modules/Pages.md b/docs/modules/Pages.md
index 6868bacde..b2ed598b8 100644
--- a/docs/modules/Pages.md
+++ b/docs/modules/Pages.md
@@ -4,7 +4,7 @@ title: Pages
# Pages
-The Layer Manager module is responsible to manage and display your [Components] as a tree.
+The Pages module in GrapesJS allows you to leverage the built-in support for creating a project with multiple pages and one page is always created under the hood, even if you don't need multi-page support. This allows to keep the API consistent and easier to extend in case you need to add multiple pages later.
::: warning
This guide is referring to GrapesJS v0.21.1 or higher
@@ -12,6 +12,92 @@ This guide is referring to GrapesJS v0.21.1 or higher
[[toc]]
+## Initialization
+
+The default editor initialization doesn't require any knowledge of pages and this was mainly done to avoid introducing breaking changes when the Pages module was introduced.
+
+This is how a typical editor initialization looks like
+
+```js
+const editor = grapesjs.init({
+ container: '#gjs',
+ height: '100%',
+ storageManager: false,
+ // CSS or a JSON of styles
+ style: '.my-el { color: red }',
+ // HTML string or a JSON of components
+ components: '
Hello world!
',
+ // ...other config options
+});
+```
+
+What actually is happening is that this configuration is automatically migrated to the Page Manager.
+
+```js
+const editor = grapesjs.init({
+ container: '#gjs',
+ height: '100%',
+ storageManager: false,
+ pageManager: {
+ pages: [
+ {
+ // the `id` will be generated automatically if not specified
+ id: 'my-first-page',
+ // CSS or a JSON of styles
+ styles: '.my-el { color: red }',
+ // HTML string or a JSON of components
+ component: 'Hello world!
',
+ }
+ ]
+ },
+});
+```
+
+::: warning
+Worth noting the previous keys are `style` and `components`, where in pages you should use `styles` and `component`.
+:::
+
+As you might guess, this is how initializing the editor with multiple pages would look like
+
+```js
+const editor = grapesjs.init({
+ // ...
+ pageManager: {
+ pages: [
+ {
+ id: 'my-first-page',
+ styles: '.my-page1-el { color: red }',
+ component: 'Page 1
',
+ },
+ {
+ id: 'my-second-page',
+ styles: '.my-page2-el { color: blue }',
+ component: 'Page 2
',
+ },
+ ]
+ },
+});
+```
+
+GrapesJS doesn't provide any default UI for the Page Manager but you can easily built one by leveraging its [APIs][Pages API]. Check the [Customization](#customization) section for more details on how to create your own Page Manager UI.
+
+::: tip API tips
+Get an array of all pages:
+```js
+editor.Pages.getAll()
+```
+Get currently selected page:
+```js
+editor.Pages.getSelected()
+```
+Select another page by ID:
+```js
+editor.Pages.select('my-second-page')
+```
+:::
+
+
+
## Configuration
@@ -381,4 +467,4 @@ For a complete list of available events, you can check it [here](/api/layer_mana
[Components]:
-[Layers API]:
+[Pages API]: