@mehboob_ishaq/page-builder

A premium, framework-agnostic visual page builder component for React and Next.js. Design beautiful web layouts with drag-and-drop ease, customize typography and layouts, and connect directly to your CMS backend (Laravel, Node, WordPress, or Static Storage) using dynamic adapter properties.

Key Features

• ✨ Tailwind CSS-Powered Canvas: Design with modern aesthetics, responsive device previews, and custom stylesheets.
• 🔗 Dynamic CMS Integration: Out-of-the-box support for Laravel API backing and static file-based adapters.
• 📝 Multi-Page Management: Create, edit, and navigate between multiple pages dynamically.
• 🔍 SEO & Metadata Panel: Customize page titles, slugs, meta titles, descriptions, and keywords directly from the builder.
• 💾 State-Saving & Publishing: Instantly save dynamic page components or compile and publish pre-rendered clean HTML/CSS.
• 📦 Framework Agnostic: Pure React client component compatible with Vite, Next.js, and other React-based frameworks.

Installation

Install the package via npm:

npm install @mehboob_ishaq/page-builder

Quick Start

1. Import Component & Styles

Import the Builder component and its CSS stylesheet into your React/Next.js page:

import { Builder } from '@mehboob_ishaq/page-builder';
import '@mehboob_ishaq/page-builder/dist/index.css';

export default function PageBuilderPage() {
  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <Builder 
        cmsType="laravel" 
        apiUrl="https://your-laravel-site.test/api/builder"
        authToken="your-auth-sanctum-token"
        onSaveSuccess={() => {
          console.log('Page saved to CMS successfully!');
        }}
      />
    </div>
  );
}

2. Configure Next.js Client Directive (if using Next.js App Router)

Make sure the page enclosing the builder is designated as a client component by adding "use client"; at the top of your file.

Configuration Properties (Props)

The <Builder /> component is configured using standard React props:

| Prop Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | cmsType | 'static' \| 'laravel' | 'static' | Choose backend adapter type. 'static' stores pages in browser storage, 'laravel' sends requests to a Laravel API. | | apiUrl | string | '/api/builder' | Base URL API endpoint for your CMS backend. | | authToken | string | undefined | Sanctum Bearer token used for authorization. If provided, login screen is bypassed automatically. | | onSaveSuccess | () => void | undefined | Callback hook triggered when the page layout is successfully saved to the server. |

Backend Integration Details

When using "laravel" as cmsType, the package communicates with the following REST API endpoints under your apiUrl:

• POST /login - Admin login authentication
• POST /logout - Revokes Sanctum bearer tokens
• GET /pages - Lists all builder-created pages
• GET /pages/{id} - Fetches component structures for a specific page
• POST /pages - Creates a new page template
• PUT /pages/{id} - Saves builder components, root layouts, design system, and compiled HTML/CSS
• POST /pages/{id}/publish - Marks page status as published
• POST /pages/{id}/unpublish - Reverts page status to draft
• POST /media - Dynamic image/asset uploads

Customizing Layouts in Host Tailwind Projects

The compiled CSS stylesheet does not ship with Tailwind's global preflight styling resets. This guarantees that importing @mehboob_ishaq/page-builder will not affect your host project's global typography, body styles, or element margins.