streats22/laragrape

A Laravel package for GrapesJS + Filament block builder integration.

dev-main 2025-06-30 18:55 UTC

Requires

• php: ^8.2
• filament/filament: >=3.0
• illuminate/support: >=12.0

Requires (Dev)

• fakerphp/faker: ^1.23
• laravel/pail: ^1.2.2
• laravel/pint: ^1.13
• laravel/sail: ^1.41
• mockery/mockery: ^1.6
• nunomaduro/collision: ^8.6
• phpunit/phpunit: ^11.5.3

MIT

• framework
• laravel

README

A powerful and modern Laravel package that brings:

• GrapesJS - Visual website builder
• Filament - Modern admin panel
• Dynamic Page Management

to your existing Laravel application.

✨ Features

• 🎨 Visual Page Builder - Drag & drop website building with GrapesJS
• 📱 Responsive Design - Built with Tailwind CSS
• 🛠️ Admin Panel - Beautiful Filament admin interface
• 📄 Page Management - Create, edit, and manage pages visually
• 🔍 SEO Optimized - Built-in meta tags and SEO features
• 🚀 Production Ready - Optimized for performance

📚 Documentation

• Package Setup Guide
• Dynamic Block System
• Modular Component System
• Custom Block Builder & Site Settings

🚀 Installation

Prerequisites

• Laravel 10/11/12 (PHP 8.2+)
• Composer
• Node.js & NPM (for asset building)

1. Install via Composer

composer require streats22/laragrape

2. Publish Assets & Config

php artisan vendor:publish --provider="Streats22\LaraGrape\Providers\LaralGrapeServiceProvider"

3. Run Migrations

php artisan migrate

4. Install Node Dependencies & Build Assets

npm install && npm run build

5. (Optional) Seed Demo Data

php artisan db:seed --class=\Streats22\LaraGrape\Database\Seeders\DatabaseSeeder

6. Create Admin User

php artisan make:filament-user

📖 Usage

Access the Admin Panel

• Visit /admin in your Laravel app to manage pages and blocks.

Creating Pages

1. Go to the admin panel (/admin)
2. Navigate to "Pages"
3. Click "Create Page"
4. Fill in basic information
5. Use the "Visual Editor" tab to design your page with GrapesJS
6. Publish when ready!

Visual Editor Features

• Pre-built Components: Hero sections, text blocks, images, videos, buttons, forms, cards, columns, and more
• Responsive Design: Preview and edit for desktop, tablet, and mobile
• Style Manager: Customize colors, fonts, spacing, and more
• Layer Management: Organize your page elements

Frontend Features

• Responsive navigation with mobile menu
• SEO-optimized page rendering
• Clean, modern design with Tailwind CSS

🏗️ Architecture

Models

• Page: Stores page content, metadata, and GrapesJS data

Controllers

• PageController: Handles frontend page display
• PageResource: Filament admin resource for page management

Views & Components

• Provided as Blade templates and Filament resources for easy integration

Services

• BlockService: Dynamic block loading and management

⚙️ Customization

• Add or modify blocks in resources/views/filament/blocks/
• Extend or override package views by publishing them
• Use the admin panel to create custom blocks

📝 Contributing

Contributions are welcome! Please open issues or PRs for bug fixes, features, or documentation improvements.

LaraGrape is a reusable package to supercharge your Laravel projects with a visual builder and modern admin tools.