🎨 Page Builder

Visual drag-drop page builder built with GrapeJS + Livewire 4 + Alpine.js + Tailwind CSS v4.

Features

• 🎨 Visual Builder — GrapeJS drag-drop canvas
• 🧱 Custom Tailwind Blocks — 15+ ready-to-use Tailwind blocks (Hero, Navbar, Features, Pricing, etc.)
• 💻 Code Editor — CodeMirror 6 editor for HTML, CSS, and JavaScript
• 📤 Import Code — Paste & import HTML/CSS/JS directly into the canvas
• 🖼️ Media Manager — Upload images & videos, stored in Laravel Storage
• 💾 Auto-save to DB — Saves HTML, CSS, JS, and GrapeJS project data to database
• 📱 Responsive Preview — Desktop, Tablet, Mobile viewport modes
• 📄 Page Management — List, create, edit, delete, publish pages
• 🔍 Live Preview — Preview pages with Tailwind CDN rendered

Quick Start

# Install dependencies
composer install
npm install

# Setup .env
cp .env.example .env
php artisan key:generate

# Database migration
php artisan migrate

# Create storage symlink
php artisan storage:link

# Build assets
npm run build

# Start development server
php artisan serve

Development

# Start all (server + vite dev)
npm run dev
php artisan serve

URLs

URL	Description
/pages	Page listing
/builder/create	Create new page
/builder/edit/{id}	Edit existing page
/preview/{slug}	Public page preview

Stack

• PHP 8.3 + Laravel 13
• Livewire 4
• Alpine.js 3
• GrapeJS 0.23
• CodeMirror 6
• Tailwind CSS v4
• SQLite (default, configurable)