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.

Install now

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.

Page Builder Overview

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.

Page Builder Settings

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.