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 keeps the API consistent and makes it easier to extend if you need to add multiple pages later.

WARNING

This guide applies to GrapesJS v0.21.1 or higher.

TIP

Want pages to just work, with a polished UI? See how the Grapes Studio SDK does it! (opens new window)

# Initialization

The default editor initialization doesn't require any knowledge of pages. This avoids breaking changes for projects created before the Pages module was introduced.

This is what a typical editor initialization looks like:

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  storageManager: false,
  // CSS or styles in JSON format
  style: '.my-el { color: red }',
  // HTML string or components in JSON format
  components: '<div class="my-el">Hello world!</div>',
  // ...other config options
});

What actually happens 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 styles in JSON format
        styles: '.my-el { color: red }',
        // HTML string or components in JSON format
        component: '<div class="my-el">Hello world!</div>',
      },
    ],
  },
});

WARNING

Notice that the original keys are style and components, whereas pages use styles and component.

Initializing the editor with multiple pages looks like this:

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 a default UI for the Page Manager, but you can easily build one using its APIs. Check the Customization section for more details on how to create your own Page Manager UI.

# Programmatic usage

To manage pages programmatically, use the Pages API.

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

Using the Pages API, you can easily create your own Page Manager UI.

The simplest 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 a quick implementation of the Page Manager UI.

# Events

For a complete list of available events, check here.

← Style Manager →