README

A visual page builder plugin for Filament. Divi-style editor with rows, columns, and 95 extensible widgets -- all using native Filament form components.

Documentation -- full documentation available online.

Live Sandbox -- try the editor without installing anything.

Features

• Flex-based 12-column grid with responsive breakpoints (sm/md/lg/xl)
• Visual span picker -- click-to-set column widths per breakpoint
• Drag & drop -- reorder widgets and rows
• Undo/Redo -- Ctrl+Z / Ctrl+Shift+Z with full history stack
• Widget picker modal -- searchable, categorized, grid layout
• Three-tab form schema -- Content / Design / Advanced on every component
• Full Design tab -- text color, alignment, font size, border, border radius, box shadow, opacity, background color, padding, margin
• Responsive visibility -- show/hide per breakpoint on any element
• Entrance animations -- fade in, slide up/down/left/right, zoom in (via Alpine x-intersect)
• Frontend rendering -- configurable routes, layouts, and SEO meta (OG, Twitter Cards, canonical, JSON-LD)
• Tailwind safelist -- automatic class collection for dynamic content
• Page templates -- 5 built-in templates (blank, landing, about, contact, pricing) + save your own
• Content revisions -- auto-save on content change, configurable max, restore from history
• Export / Import -- pages as JSON files
• Widget lifecycle hooks -- onSave, onCreate, onDelete, onDuplicate with optional context
• Content validation -- structural + widget type validation
• Form Field Packs -- reusable field groups for image, link, and color patterns
• prepareForRender() hook -- transform widget data before rendering
• Widget validation rules -- self-declaring validation via getValidationRules()
• Widget deprecation -- graceful sunset path with isDeprecated()
• WidgetData value object -- typed accessors for Blade views
• Widget debug command -- layup:debug-widget for instant widget introspection
• Render isolation -- broken widgets no longer crash entire pages
• Widget search tags -- additional terms for the builder's widget picker
• Widget asset declaration -- declare JS/CSS dependencies per widget
• Widget auto-discovery -- scans App\Layup\Widgets for custom widgets
• Global theme system -- CSS custom properties for colors, fonts, and border radius with Filament panel inheritance
• Dark mode theme support -- automatic color lightening with manual overrides
• Configurable model -- swap the Page model per dashboard
• HasLayupContent trait -- add Layup rendering to any Eloquent model
• <x-layup-widget> component -- render individual widgets in any Blade template
• Testing helpers -- factory states and assertions for custom widget development
• Developer tooling -- layup:doctor, layup:list-widgets, layup:search commands
• Publishable stubs -- customize make-widget scaffolding templates
• 1,131 tests, 3,517 assertions

Built-in Widgets (95)

Requirements

• PHP 8.3+
• Laravel 12+
• Filament 5
• Livewire 4

Quick Start

1. Install:

composer require crumbls/layup

2. Register the plugin in your Filament panel provider:

use Crumbls\Layup\LayupPlugin;

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

3. Run the install command:

php artisan layup:install

4. Add the safelist to your Tailwind config:

Tailwind v4 (resources/css/app.css):

@source "../../storage/layup-safelist.txt";

Tailwind v3 (tailwind.config.js):

content: ['./storage/layup-safelist.txt']

5. Build frontend assets:

npm run build

6. Create a page in your Filament panel and set the status to Published.

See the Installation docs for manual installation steps and troubleshooting.

Documentation

Full documentation is available at crumbls.com/documentation/layup.

• Getting Started -- creating pages, adding widgets, publishing
• Widgets -- all 95 built-in widgets by category
• Configuration -- every config option
• Grid System -- 12-column grid, breakpoints, responsive behavior
• Advanced -- custom widgets, theme system, frontend rendering, testing, templates, revisions, Tailwind safelist
• API Reference -- Widget contract, models, service provider, support classes

Contributing

See CONTRIBUTING.md for development setup, code style, and testing guidelines. For widget development, see AGENTS.md for a detailed reference.

Vision & Roadmap

See VISION.md for where Layup is headed and how you can help shape it.

License

MIT -- see LICENSE.md