PHPackages geosem42/filamentor - 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. [Utility & Helpers](/categories/utility) 4. / 5. geosem42/filamentor ActiveLibrary[Utility & Helpers](/categories/utility) geosem42/filamentor =================== Filamentor - A flexible page builder for Laravel Filament 1.1.1(9mo ago)30905↓50%7[1 issues](https://github.com/geosem42/filamentor/issues)MITJavaScriptPHP ^8.1 Since Apr 29Pushed 9mo ago3 watchersCompare [ Source](https://github.com/geosem42/filamentor)[ Packagist](https://packagist.org/packages/geosem42/filamentor)[ Docs](https://github.com/geosem42/filamentor)[ GitHub Sponsors](https://github.com/geosem42)[ RSS](/packages/geosem42-filamentor/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (8)Versions (4)Used By (0) Filamentor - Drag & Drop Page Builder for Filament ====================================================== [](#filamentor---drag--drop-page-builder-for-filament) Filamentor is a powerful, flexible page builder plugin for Laravel Filament that empowers you to create dynamic pages with a modern drag-and-drop interface. Build professional layouts without writing code using an intuitive grid-based system. [![Filamentor Screenshot](https://camo.githubusercontent.com/f91e0de285dcfa42a8ba9131a1df352482c9ec95e99aaea5334072c8d1a0b243/68747470733a2f2f692e696d6775722e636f6d2f68624f717576532e706e67)](https://camo.githubusercontent.com/f91e0de285dcfa42a8ba9131a1df352482c9ec95e99aaea5334072c8d1a0b243/68747470733a2f2f692e696d6775722e636f6d2f68624f717576532e706e67) Key Features ------------ [](#key-features) - **Drag & Drop Interface**: Easily create and arrange content with intuitive drag-and-drop interactions - **Responsive Grid System**: Build layouts using a flexible row/column grid that adapts to different screen sizes - **Ready-to-Use Elements**: Includes text, image, and video elements out of the box - **Margin & Padding Controls**: Fine-tune spacing with visual controls for perfect layouts - **Custom CSS Classes**: Apply custom styling to any row or column for unlimited design possibilities - **Multiple Frontend Options**: Works with both Vue/Inertia and Livewire stacks - **Seamless Filament Integration**: Appears as a native feature in your Filament admin panel Installation ------------ [](#installation) ### Prerequisites [](#prerequisites) - PHP 8.1 or higher - Laravel 11.x or higher - Filament 3.x - Tailwind CSS CSS Framework Dependency ------------------------ [](#css-framework-dependency) Filamentor relies on TailwindCSS for its layout system, particularly for: - Grid layouts (`grid-cols-*` classes) - Spacing utilities (`p-*`, `m-*` classes) - Responsive design classes Make sure your layout includes Tailwind CSS. ### Step 1: Install the Package [](#step-1-install-the-package) ``` composer require geosem42/filamentor ``` ### Step 2: Run the Installation Command [](#step-2-run-the-installation-command) ``` php artisan filamentor:install ``` This command will: 1. Publish migration files to your database/migrations directory 2. Create necessary public asset directories and copy required files: - `/public/js/filamentor/filamentor.js` - `/public/css/filamentor/filamentor.css` 3. Prompt you to select your preferred frontend stack (Vue or Livewire) 4. Publish stack-specific files. ### Step 3: Run Migrations [](#step-3-run-migrations) After installing the package, run the migrations: ``` php artisan migrate ``` This will create the necessary database tables for pages, layouts, and related entities. ### Step 4: Add Route [](#step-4-add-route) Add the following route to your `routes/web.php`: ``` Route::get('/{slug}', [App\Http\Controllers\PageController::class, 'show'])->name('page.show'); ``` ### Step 5: Update Tailwind Configuration [](#step-5-update-tailwind-configuration) To ensure dynamic grid classes work properly, add the following to your `tailwind.config.js` file: ``` module.exports = { // ...other config safelist: [ 'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10', 'grid-cols-11', 'grid-cols-12' ], // ...other config } ``` ### Step 6: Register with Filament [](#step-6-register-with-filament) Add the Filamentor plugin to your Filament panel provider in `app/Providers/Filament/AdminPanelProvider.php`: ``` use Geosem42\Filamentor\FilamentorPlugin; public function panel(Panel $panel): Panel { return $panel // ...other configuration ->plugins([ // ...other plugins FilamentorPlugin::make(), ]); } ``` ### Step 7: Compile Assets (if using Vue) [](#step-7-compile-assets-if-using-vue) If you're using the Vue stack, run: ``` npm run build ``` Post-installation ----------------- [](#post-installation) After installation, you'll find the Filamentor page builder in your Filament admin panel. You can create and manage pages through the interface. Template Integration Note ------------------------- [](#template-integration-note) The Filamentor page templates (both Vue and Livewire versions) do not come pre-integrated with any application layout. You will need to manually include them in your own application layout to ensure proper styling, navigation, and site structure. For example: - In Livewire: Wrap `resources/views/pages/show.blade.php` in your layout. - In Vue: Include the `resources/js/Pages/Page.vue` within your `AppLayout` layout component. This design gives you complete flexibility to integrate Filamentor pages within your existing site structure. Stack-Specific Notes -------------------- [](#stack-specific-notes) ### Vue/Inertia Setup [](#vueinertia-setup) If you selected the Vue stack, ensure Inertia.js is properly installed and configured in your application. The page rendering happens through the Inertia Page component published during installation. ### Livewire Setup [](#livewire-setup) If you selected the Livewire stack, ensure Livewire is properly installed. The page rendering will use the Livewire components published during installation. For proper SEO functionality with Filamentor's Livewire implementation, your layout must include a `@stack('meta')` directive in the `` section. Published Files --------------- [](#published-files) The installation command will publish the following files depending on your selected stack. #### For Vue: [](#for-vue) - `resources/js/Pages/Page.vue` - `resources/js/Components/Elements/TextElement.vue` - `resources/js/Components/Elements/ImageElement.vue` - `resources/js/Components/Elements/VideoElement.vue` - `app/Http/Controllers/PageController.php` #### For Livewire: [](#for-livewire) - `app/Livewire/Page.php` - `app/Livewire/Elements/TextElement.php` - `app/Livewire/Elements/ImageElement.php` - `app/Livewire/Elements/VideoElement.php` - `app/Http/Controllers/PageController.php` - `resources/views/livewire/page.blade.php` - `resources/views/pages/show.blade.php` - `resources/views/livewire/elements/text-element.blade.php` - `resources/views/livewire/elements/image-element.blade.php` - `resources/views/livewire/elements/video-element.blade.php` Troubleshooting --------------- [](#troubleshooting) If you encounter issues with the Filamentor UI after installation: 1. Ensure all frontend assets have been published correctly 2. Verify that you've added the Tailwind safelist configuration 3. Make sure you've registered the plugin with your Filament panel 4. Check that you've run migrations and your database tables are created correctly License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 39 — LowBetter than 86% of packages Maintenance55 Moderate activity, may be stable Popularity30 Limited adoption so far Community11 Small or concentrated contributor base Maturity48 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 ~43 days Total 3 Last Release 297d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f23dcdf2b12e593a9c4584f7a6b9d4778fff2859c0295f8a3c7199ba177c5c62?d=identicon)[geosem42](/maintainers/geosem42) --- Top Contributors [![geosem42](https://avatars.githubusercontent.com/u/3442636?v=4)](https://github.com/geosem42 "geosem42 (55 commits)") --- Tags laravelgeosem42filamentor ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/geosem42-filamentor/health.svg) ``` [![Health](https://phpackages.com/badges/geosem42-filamentor/health.svg)](https://phpackages.com/packages/geosem42-filamentor) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)