docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Getting started

Quick start ​

1. Install dependencies and the package ​

RequirementVersion
MODX Revolution3.0.3+
PHP8.2+
VueTools1.1.2+
pdoTools3.0+
PageBuilder (Free)1.0.17-beta
PageBuilder Pro1.0.17-beta, requires pagebuilder ≥ 1.0.17

Install PageBuilder (Free) and PageBuilder Pro from modstore.pro. Package provider not found happens only for the encrypted Pro package when the provider is not connected. The current Free package is not encrypted. Free install does not show that message.

  1. Connect ModStore.
  2. Install VueTools and pdoTools if they are not on the site yet.
  3. Extras → Installer → Download Extras: find PageBuilder (Free) or PageBuilder Pro → Download → Install.
  4. Settings → Clear cache. The pagebuilder namespace should appear in the package list.

Pro

Installing PageBuilder Pro is enough: Package Manager usually pulls the Free core (pagebuilder) as requires.pagebuilder. If the dependency did not download, install Free from the same provider.

2. Grant permissions ​

In Users → User groups, add to the editor policy:

  • pagebuilder_view
  • pagebuilder_save

For section type management in the control panel: pagebuilder_manage_types.

3. Enable the Sections tab ​

The tab is off by default. In System settings → namespace pagebuilder:

KeyValue
pagebuilder_resource_tab_enabled1
pagebuilder_resource_tab_parentsempty = all resources. Otherwise the resource id itself, its direct parent, or any ancestor

Tab position: pagebuilder_resource_tab_index (0 first and selected on open, -1 last).

Sections tab on a resource

Details: System settings.

4. Add output to the template ​

In the page template or resource content field:

modx
[[!PageBuilder]]
fenom
{'!PageBuilder' | snippet}

The snippet renders published sections for the current resource. The draft is not shown on the site.

5. Build the page in the manager ​

  1. Open the resource → Sections tab.
  2. Add a section (for example Hero) and fill in the fields.
  3. Press Save in the resource toolbar. The editor validates required fields, writes the draft, and publishes sections.
  4. Autosave writes the draft only. The site does not show it until you save the resource.

With pagebuilder_fake_enabled = 1, the inspector shows a Fake button that fills fields with demo data for quick layout checks.

Draft preview without publish: Preview on the tab (token via preview.php).

6. Check the frontend ​

Open the resource on the site. Section HTML should appear. By default pagebuilder-sections.css loads (pagebuilder_load_frontend_css).

If the block is empty:

  • the resource was not saved after edits (autosave does not publish)
  • the snippet lacks permission on the resource
  • the template caches the call without !. Use [[!PageBuilder]]

quiz and contact_form sections (Pro) need FetchIt on the site. Without it the form shows an unavailability message.

Next steps ​