PHPackages                             cybertroniankelvin/graper - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. cybertroniankelvin/graper

ActiveLibrary[Admin Panels](/categories/admin)

cybertroniankelvin/graper
=========================

A visual drag-and-drop page builder for Filament admin panels, powered by GrapeJS v3. Build landing pages, marketing sites, and custom content pages without writing code.

v1.0.1(2mo ago)2211.9k↓63.2%6[2 PRs](https://github.com/CybertronianKelvin/graper/pulls)MITPHPPHP ^8.2CI passing

Since Apr 27Pushed 4w ago1 watchersCompare

[ Source](https://github.com/CybertronianKelvin/graper)[ Packagist](https://packagist.org/packages/cybertroniankelvin/graper)[ Docs](https://github.com/cybertroniankelvin/graper)[ GitHub Sponsors](https://github.com/cybertroniankelvin)[ RSS](/packages/cybertroniankelvin-graper/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (13)Versions (6)Used By (0)

GrapeJS Page Builder for Filament
=================================

[](#grapejs-page-builder-for-filament)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1f07a8760bf39ab832e978ca0ac77d4fb7b4579639481a8eed1617e86b5ace34/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f637962657274726f6e69616e6b656c76696e2f6772617065722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/cybertroniankelvin/graper)[![Total Downloads](https://camo.githubusercontent.com/ca070015dc5da80465ad0ee097f6a45125a8cfcc3a72686e1d14ca81bc29a262/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f637962657274726f6e69616e6b656c76696e2f6772617065722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/cybertroniankelvin/graper)

A visual page builder plugin for Filament that uses GrapeJS v3 to let admins create and edit pages with a drag-and-drop interface.

How to Use This Plugin
----------------------

[](#how-to-use-this-plugin)

### 1. Installation & Setup

[](#1-installation--setup)

In a Laravel/Filament app:

```
# Install the package
composer require cybertroniankelvin/graper

# Option A: one-step install (recommended) — publishes config, runs migrations
php artisan graper:install

# Option B: manual
php artisan migrate
php artisan vendor:publish --tag=graper-config   # optional — to customise config
```

Register the plugin (in `app/Providers/Filament/AdminPanelProvider.php`):

```
use CybertronianKelvin\Graper\GraperPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GraperPlugin::make(),
        ]);
}
```

---

### 2. Admin Usage (No Code)

[](#2-admin-usage-no-code)

Once installed, admins can:

1. Navigate to Pages in Filament sidebar
2. Create Page → Enter title, slug, publish status
3. Use the visual editor:
    - Drag blocks from the left panel (Hero, CTA, Stats, Testimonials, etc.)
    - Edit text, images, colors directly on the canvas
    - Rearrange blocks by dragging
4. Save → Content stored in graper\_pages table
5. Publish → Page accessible at yourapp.test/pages/{slug}

---

### 3. Adding Custom Blocks (Developer)

[](#3-adding-custom-blocks-developer)

In your app's service provider:

```
use CybertronianKelvin\Graper\Blocks\BlockRegistry;
use App\Blocks\NewsletterSignupBlock;

public function boot(): void
{
    BlockRegistry::make()->register(NewsletterSignupBlock::class);
}
```

Create a block class:

```
namespace App\Blocks;

use CybertronianKelvin\Graper\Blocks\Block;

class NewsletterSignupBlock extends Block
{
    public static function getId(): string => 'newsletter-signup';

    public static function getName(): string => 'Newsletter Signup';

    public static function getCategory(): string => 'Marketing';

    public static function getOrder(): int => 50;

    public function getTemplate(): string
    {
        return

    Subscribe to Our Newsletter
    Get the latest updates delivered to your inbox

        Subscribe

HTML;
    }
}
```

---

### 4. Displaying Pages on Frontend

[](#4-displaying-pages-on-frontend)

Published pages are automatically available at:

```
yourapp.test/pages/{slug}           # Default prefix
yourapp.test/{slug}                 # If prefix configured as empty

```

In a custom Blade view:

```
@php
    $page = \CybertronianKelvin\Graper\Models\GraperPage::where('slug', 'about-us')->first();
@endphp

{!! $page->html !!}
{!! $page->css !!}
```

Or via the controller:

```
use CybertronianKelvin\Graper\Http\Controllers\GraperPageController;

Route::get('/landing/{slug}', [GraperPageController::class, 'display']);
```

---

### 5. Programmatic Usage

[](#5-programmatic-usage)

Create a page programmatically:

```
use CybertronianKelvin\Graper\Models\GraperPage;

GraperPage::create([
    'title' => 'Black Friday Landing',
    'slug' => 'black-friday-2026',
    'is_published' => true,
    'html' => '...',
    'css' => '.section { color: red; }',
    'project_data' => $grapejsProjectData,
]);
```

Load page content:

```
$page = GraperPage::where('slug', 'black-friday-2026')->first();

// Access individual fields
$html = $page->html;
$css = $page->css;

// Or get JSON envelope
$content = $page->content; // {"html": "...", "css": "...", "project_data": {...}}
```

---

### 6. Configuration

[](#6-configuration)

Publish and edit config:

```
php artisan vendor:publish --tag=graper-config
```

config/graper.php:

```
return [
    'page_route_prefix' => 'pages',  // Change URL prefix
    // Other options...
];
```

---

### 7. Common Use Cases

[](#7-common-use-cases)

Use CaseHowMarketing landing pagesAdmin creates via Filament, publishes at /pages/{slug}Custom homepages per campaignCreate multiple pages, swap slug in routingEmail templatesUse editor to design, export HTML via APIClient-editable contentGive clients Filament access to edit their pagesA/B test variantsDuplicate pages, different slugs, split traffic---

### 8. API Endpoints

[](#8-api-endpoints)

EndpointMethodPurpose/graper/api/blocksGETList all available blocks/graper/api/page/{id}GETLoad page content for editor/graper/api/page/{id}PUTSave page content/graper/edit/{id}GETOpen inline editor/pages/{slug}GETDisplay published pageTesting
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review our [security policy](https://github.com/cybertroniankelvin/graper/security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Kelvin Atawura](https://github.com/cybertroniankelvin)
- [All Contributors](https://github.com/CybertronianKelvin/graper/graphs/contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

50

—

FairBetter than 95% of packages

Maintenance89

Actively maintained with recent releases

Popularity39

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

2

Last Release

86d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/110610457?v=4)[Cybertronian Kelvin](/maintainers/CybertronianKelvin)[@CybertronianKelvin](https://github.com/CybertronianKelvin)

---

Top Contributors

[![CybertronianKelvin](https://avatars.githubusercontent.com/u/110610457?v=4)](https://github.com/CybertronianKelvin "CybertronianKelvin (27 commits)")

---

Tags

laravelcmsadminvisual editordrag-and-dropfilamentpage buildergrapejs

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/cybertroniankelvin-graper/health.svg)

```
[![Health](https://phpackages.com/badges/cybertroniankelvin-graper/health.svg)](https://phpackages.com/packages/cybertroniankelvin-graper)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.8k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

274333.4k9](/packages/croustibat-filament-jobs-monitor)[stephenjude/filament-debugger

About

104162.2k2](/packages/stephenjude-filament-debugger)[mradder/filament-logger

Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels.

2318.8k](/packages/mradder-filament-logger)[finity-labs/fin-mail

A powerful email template manager and composer for Filament with dynamic token replacement, template versioning, and inline email sending.

284.8k2](/packages/finity-labs-fin-mail)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)