alexspi/filament-site-designer

Filament site design constructor with theme tokens and SortableJS block canvas

v1.1.1 2026-08-26 17:45 UTC

Requires

• php: ^8.2
• filament/filament: ^3.2|^4.0|^5.0
• illuminate/support: ^11.0|^12.0|^13.0
• spatie/laravel-package-tools: ^1.16

MIT

• alexspi

• theme
• layout
• laravel
• filament
• site-designer

Published on Packagist.org on 2026-08-26 18:20 UTC

README

Visual site design constructor for Filament: theme CSS variables, chrome (header / sidebar / footer) canvas, and page template layouts. Design JSON is stored in the database; your Laravel front renders blocks via helpers.

This package is the admin designer + storage, not a full front theme kit.

Requirements

Requirement	Condition
PHP	^8.2
Laravel	^11 | ^12 | ^13
Filament	^3.2 | ^4 | ^5 (a Panel to register the plugin on)
Database	Can run migrations (site_designs table)
Public assets	Writable public/vendor/filament-site-designer after publish
Front	Host app renders chrome/templates using SiteDesign helpers

Optional (configured, not hard-coded):

• Site settings model for brand preview
• Post model for live post previews / preview URLs
• Livewire (or page) class map for front template detection

Install

Packagist

composer require alexspi/filament-site-designer

GitHub VCS (before / without Packagist)

{
  "repositories": [
    {
      "type": "vcs",
      "url": "https://github.com/YOUR_ORG/filament-site-designer"
    }
  ],
  "require": {
    "alexspi/filament-site-designer": "^1.0"
  }
}

Path monorepo

{
  "repositories": [
    {
      "type": "path",
      "url": "packages/alexspi/filament-site-designer",
      "options": { "symlink": true }
    }
  ],
  "require": {
    "alexspi/filament-site-designer": "*"
  }
}

After Composer

php artisan vendor:publish --tag=filament-site-designer-config
php artisan vendor:publish --tag=filament-site-designer-assets
php artisan migrate

Migrations are auto-loaded via the package provider (hasMigration). If your setup needs an explicit publish:

php artisan vendor:publish --tag=filament-site-designer-migrations
php artisan migrate

Register on a Filament panel

use Alexspi\FilamentSiteDesigner\FilamentSiteDesignerPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            FilamentSiteDesignerPlugin::make()
                ->navigationGroup('Design')
        );
}

What happens on install

Step	Automatic	Manual
Service provider	Yes (package discovery)	—
Views namespace filament-site-designer::	Yes	—
Config	Defaults from package	Publish to customize
Canvas CSS/JS	—	vendor:publish --tag=filament-site-designer-assets
site_designs table	On migrate	—
Admin pages	—	Register plugin on a panel
Front rendering	—	Call SiteDesign::* in Blade/Livewire

Without assets publish, the canvas UI has no styles/scripts.
Without the plugin, design pages do not appear in Filament.
Without front helpers, the public site ignores saved layouts.

Upgrade

After updating the package, re-publish assets:

php artisan vendor:publish --tag=filament-site-designer-assets --force

Configuration

Publish config/filament-site-designer.php and adjust:

• chrome_blocks / templates / post_card_blocks — block catalogs
• row_presets / row_presets.templates.* — one-click row presets per zone/page
• preview — static brand fields and optional resolvers
• integrations — optional model class names (site_setting_class, post_model_class, post_route)
• front.template_map — Livewire/page class → template key
• front.preview_urls — designer “open site” paths per template
• content_editor_roles — simplified UI for listed roles

Portable integrations (no hard App\* in the package)

'integrations' => [
    'site_setting_class' => \App\Models\SiteSetting::class, // or null
    'post_model_class' => \App\Models\Post::class,           // or null
    'post_route' => 'blog.show',
],

'front' => [
    'template_map' => [
        \App\Livewire\HomePage::class => 'home',
        \App\Livewire\BlogShow::class => 'post_show',
    ],
    'preview_urls' => [
        'home' => '/',
        'blog_index' => '/blog',
        'post_show' => '/blog',
        'page_show' => '/',
    ],
],

Or use callables:

'preview' => [
    'brand_resolver' => fn (): array => [/* name, logo, tagline, footer */],
    'posts_resolver' => fn (int $limit): array => [/* preview rows */],
    'post_url_resolver' => fn (): ?string => url('/blog/example'),
],

If resolvers/integrations are empty, brand falls back to config('app.name') and post previews are empty (mock UI in canvas).

Frontend helpers

use Alexspi\FilamentSiteDesigner\Support\SiteDesign;

// In layout <head>:
{!! SiteDesign::cssVariablesStyle() !!}

SiteDesign::zone('header');
SiteDesign::enabledBlocks('post_show');
SiteDesign::contentLayoutClass();
SiteDesign::frontTemplateKey(); // needs front.template_map

Recommended host pattern — thin alias/extension:

namespace App\Support;

use Alexspi\FilamentSiteDesigner\Support\SiteDesign as PackageSiteDesign;

class SiteDesign extends PackageSiteDesign
{
    // host-only overrides if needed
}

Optional: publish views to customize canvas Blade:

php artisan vendor:publish --tag=filament-site-designer-views

License

MIT — see LICENSE.

Publishing

See PUBLISHING.md for GitHub remote, tags, and Packagist.