Page Builder
Bring your Strapi content to life with a visual editor. Build and assign templates to your Strapi content-types and reuse them over and over again.
Page Builder
Visual, drag and drop page editor for Strapi.
Connect Page Builder to your web site and start editing your own custom components, visually.
Documentation
Read the complete documentation at https://pagebuilder.wc8.io
Page Builder plugin for Strapi
Strapi is the leading open-source headless Content Management System. It’s 100% JavaScript, fully customizable and developer-first.
Visually edit and build your site using Strapi content and custom componets
The Page Builder plugin adds a visual page editor to Strapi, leting you drag and drop custom sections and connect them to CMS data.
Setting up Page Builder is quick and easy.
- Sign up for a free Page Builder API key at https://pagebuilder.wc8.io
- Add the companion @wecre8websites/strapi-page-builder-react package to your React app configure an editor URL.
- Add the new template relation field to one or more of your Strapi content types.
- Configure the Page Builder plugin with your API key, Editor URL and select the default content type and content.
- Open Page Builder from the sidebar menu and start building custom templates.
✨ Features
- Quick installation and setup.
- Build custom components that can be reused in any template.
- Add, remove, change, drag and drop components and sections with an easy to use interface.
- Connect your CMS data and use it in your custom components with no additional coding.
- Reuse templates and fill them with dynamic data.
- Use Strapi's Role-based access control to restrict permissions to only content editors.
- Allows non-technical users to manage and update content quickly and easily.
🖐 Requirements
The requirements to install the Page Builder plugin is the same as those to install Strapi.
Please refer to the official Strapi installation requirement doc here: Installation Requirements.
Minimum environment requirements
- Node.js
>=18.x.x
- NPM
>=8.x.x
We are following the official Node.js releases timelines.
Supported Strapi versions:
- Strapi v5.x
The Page Builder plugin is designed for Strapi v5.x. It has not been tested with previous versions.
⏳ Installation
Use npm to install this plugin within your Strapi project.
Refer to this doc to install npm
$ npm install @wecre8websites/strapi-page-builder
$ npm run build
$ npm run develop
The Page Builder plugin should appear in the Strapi sidebar after you run the app again.
🔧 Configuration
You can easily configure the Page Builder plugin to connect to your website.
- Go to
Settings -> Global Settings -> Page Builder
. - On the settings page, Enter your API key and website's Page Builder URL, then choose your default content type and content.
- Click on Save and check the connection.
Permissions
Configure user roles to allow or limit access to Page Builder
- To allow a role to view or change the template assigned to a content type, add the
Template -> Read
permission. - Choose whether the use can view, edit content only or add and remove components from templates.
- Allow or restrict access to Page Builder settings
Configure content types
After configuring Page Builder, you must add a template relation field to any content type you want to use with Page Builder.
- Click on Content-Type Builder from the Strapi sidebar.
- Choose a content type to modify. Both collection types and single types can be used
- Add a relation field to the content type
- Choose Template (from: strapi-page-builder) in the drop down menu and ensure the relation is set to has one Template. Give your field a name, such as "template".
- Click on finish.
Add the companion package to your React website
For the Page Editor plugin to be able to connect to your site, you must add the companion @wecre8websites/strapi-page-builder-react package to your React app configure an editor URL.
📝 License
Copyright © 2025 wecre8websites
Install now
npm install @wecre8websites/strapi-page-builder
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.