Strapi Page Builder

What is Strapi Page Builder?

Strapi Page Builder is a modular visual page editor for Strapi CMS for websites build in React. You can use Strapi Page Builder to build custom reusable templates for your website and bring your CMS content to life.

• 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.

Quick Start

Get up and running with Strapi Page Builder in just a few minutes.

Strapi Page Builder was built and tested with Strapi 5  and Next.js 15 .

Sign up

If you don’t already have one, visit the Strapi Page Builder sign-up page to sign up for a free development account and get your API key; it will be needed in the next steps.

Strapi Page Builder Template

Set up a new Strapi environment using the preconfigured Strapi Page Builder template by running

pnpm dlx create-strapi-app@latest cms \
--template https://github.com/wecre8websites/strapi-page-builder-cms \
--template-branch master

npx create-strapi-app@latest cms \
--template https://github.com/wecre8websites/strapi-page-builder-cms
--template-branch master

yarn dlx create-strapi-app@latest cms 
--template https://github.com/wecre8websites/strapi-page-builder-cms
--template-branch master

Build, then run the Strapi development environment.

pnpm build
pnpm develop

npm run build
npm run develop

yarn build
yarn develop

Open your Strapi admin panel by visiting http://localhost:1337/admin  and create an admin user by following the on-screen instructions.

Next, open the Strapi Page Builder settings  page and add your Strapi Page Builder API key. Leave the remaining values as they are for now.

Finally, visit the API Tokens settings  and create a new Read-Only API token. Save this token as it will be needed in the next step.

Next.js Strapi Page Builder Template

Set up a new Next.js 15 environment using the preconfigured Strapi Page Builder template by running

pnpm dlx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo

npx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo

yarn dlx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo

Configure an environment variable called PAGE_BUILDER_API_KEY assign to it your Strapi Page Builder API key.

Configure another one called STRAPI_ADMIN_TOKEN and assign to it the Read-Only API token created in the previous step.

IMPORTANT: API keys must be handled securely as though they were passwords. You should never commit your API key to GitHub or any where else that it may become compromised.

Start the Next.js development server by running

pnpm dev

npm run dev

yarn dev

Start editing

With both Strapi and Next.js running, open Strapi Page Builder  from the Strapi side-bar and start editing your content, visually.

Get Support

If you have any questions about Strapi Page Builder, please open a GitHub issue .

License

Strapi Page Builder is licensed under MIT.