GrapesJS

# Pages

The Pages module in GrapesJS allows you to create a project with multiple pages. By default, one page is always created under the hood, even if you don't need multi-page support. This allows keeping the API consistent and easier to extend if you need to add multiple pages later.

WARNING

This guide is referring to GrapesJS v0.21.1 or higher

# 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:

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: '<div class="my-el">Hello world!</div>',
  // ...other config options
});

What actually is happening is that this configuration is automatically migrated to the Page Manager.

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  storageManager: false,
  pageManager: {
    pages: [
      {
        // without an explicit ID, a random one will be created
        id: 'my-first-page',
        // CSS or a JSON of styles
        styles: '.my-el { color: red }',
        // HTML string or a JSON of components
        component: '<div class="my-el">Hello world!</div>',
      },
    ],
  },
});

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:

const editor = grapesjs.init({
  // ...
  pageManager: {
    pages: [
      {
        id: 'my-first-page',
        styles: '.my-page1-el { color: red }',
        component: '<div class="my-page1-el">Page 1</div>',
      },
      {
        id: 'my-second-page',
        styles: '.my-page2-el { color: blue }',
        component: '<div class="my-page2-el">Page 2</div>',
      },
    ],
  },
});

GrapesJS doesn't provide any default UI for the Page Manager but you can easily built one by leveraging its APIs. Check the Customization section for more details on how to create your own Page Manager UI.

# Programmatic usage

If you need to manage pages programmatically you can use its APIs.

Below are some commonly used methods:

// Get the Pages module first
const pages = editor.Pages;

// Get an array of all pages
const allPages = pages.getAll();

// Get currently selected page
const selectedPage = pages.getSelected();

// Add a new Page
const newPage = pages.add({
  id: 'new-page-id',
  styles: '.my-class { color: red }',
  component: '<div class="my-class">My element</div>',
});

// Get the Page by ID
const page = pages.get('new-page-id');

// Select another page by ID
pages.select('new-page-id');
// or by passing the Page instance
pages.select(page);

// Get the HTML/CSS code from the page component
const component = page.getMainComponent();
const htmlPage = editor.getHtml({ component });
const cssPage = editor.getCss({ component });

// Remove the Page by ID (or by Page instance)
pages.remove('new-page-id');

# Customization

By using the Pages API it's easy to create your own Page Manager UI.

The simpliest way is to subscribe to the catch-all page event, which is triggered on any change related to the Page module (not related to page content like components or styles), and update your UI accordingly.

const editor = grapesjs.init({
  // ...
});

editor.on('page', () => {
  // Update your UI
});

In the example below you can see an quick implementation of the Page Manager UI.

# Events

For a complete list of available events, you can check it here.

← Style Manager →