Filament v4 Custom Field Plugins with Alpine.js | Mohamed Said [Skip to content](#main) [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://www.msaied.com/public) - [Home](https://www.msaied.com/public) - [Projects](https://www.msaied.com/public/projects) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [About](https://www.msaied.com/public#about) [ Contact](https://www.msaied.com/public#contact) Menu Menu ---- Close - [HomeStart here](https://www.msaied.com/public) - [ProjectsCase studies](https://www.msaied.com/public/projects) - [ArticlesEngineering notes](https://www.msaied.com/public/articles) - [CertificatesCredentials](https://www.msaied.com/public/certificates) - [AboutHow I work](https://www.msaied.com/public#about) - [ContactGet in touch](https://www.msaied.com/public#contact) [Start a conversation](https://www.msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 1. [Home](https://www.msaied.com/public) 2. / 3. [Articles](https://www.msaied.com/public/articles) 4. / 5. Filament v4 Custom Field Plugins: Wrapping Third-Party JS Libraries Cleanly Filament v4 Custom Field Plugins: Wrapping Third-Party JS Libraries Cleanly ============================================================================ Learn how to wrap any third-party JavaScript library into a reusable Filament v4 custom field plugin, with proper Alpine.js wiring, Livewire state sync, and asset registration. ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 10 Sep 2026 · Updated 10 Sep 2026 · 3 min read ShareCopy linkCopied ![Filament v4 Custom Field Plugins: Wrapping Third-Party JS Libraries Cleanly](https://cdn.msaied.com/650/513b93e06c50ba04f241beb1c3c16aa8.png) On this page +1. [Why Custom Field Plugins Deserve a Proper Architecture](#why-custom-field-plugins-deserve-a-proper-architecture) 2. [Step 1: Scaffold the Field Class](#step-1-scaffold-the-field-class) 3. [Step 2: The Blade View with Alpine.js Wiring](#step-2-the-blade-view-with-alpinejs-wiring) 4. [Step 3: The Alpine Component](#step-3-the-alpine-component) 5. [Step 4: Asset Registration via a Service Provider](#step-4-asset-registration-via-a-service-provider) 6. [Step 5: Repeater Compatibility](#step-5-repeater-compatibility) 7. [Takeaways](#takeaways) Why Custom Field Plugins Deserve a Proper Architecture ------------------------------------------------------ Dropping a `` tag into a Blade view and calling it a Filament field is a trap. You end up with state that Livewire can't track, assets that load on every page, and a component that breaks the moment someone nests it inside a repeater. Filament v4's schema-based architecture gives you clean extension points — use them. This article walks through wrapping a hypothetical `FancyPicker` JS library into a first-class Filament v4 field plugin. --- Step 1: Scaffold the Field Class -------------------------------- Extend `Filament\Forms\Components\Field` and declare your configuration API: ```php namespace App\Forms\Components; use Filament\Forms\Components\Field; class FancyPickerField extends Field { protected string $view = 'forms.components.fancy-picker'; protected bool $allowMultiple = false; public function allowMultiple(bool $condition = true): static { $this->allowMultiple = $condition; return $this; } public function getAllowMultiple(): bool { return $this->allowMultiple; } } ``` Keep configuration fluent and immutable-friendly. Avoid storing mutable JS state in PHP — that belongs in Alpine. --- Step 2: The Blade View with Alpine.js Wiring -------------------------------------------- Filament v4 passes the component instance into the view. Use `$getStatePath()` and `$getState()` to bind correctly: ```blade @php $statePath = $getStatePath(); $state = $getState(); $multiple = $getAllowMultiple(); @endphp ``` `$wire.entangle(...).live` is the critical line — it creates a two-way binding between Alpine's reactive data and Livewire's component state without any manual event dispatching. --- Step 3: The Alpine Component ---------------------------- Register your Alpine component in a dedicated JS file so it's tree-shakeable: ```javascript // resources/js/fancy-picker.js import FancyPickerLib from 'fancy-picker-lib'; export default function fancyPicker({ state, multiple }) { return { state, multiple, picker: null, init() { this.picker = new FancyPickerLib(this.$refs.picker, { multiple: this.multiple, defaultValue: this.state, onChange: (value) => { this.state = value; // entangle pushes this to Livewire }, }); this.$watch('state', (value) => { // Sync external changes (e.g., form reset) back into the lib if (this.picker.getValue() !== value) { this.picker.setValue(value); } }); }, }; } ``` The `$watch` in the opposite direction handles programmatic state changes — form `fill()`, wizard navigation, or `reset()` calls. --- Step 4: Asset Registration via a Service Provider ------------------------------------------------- Never enqueue assets globally. Use Filament's asset system so they only load when the field is rendered: ```php use Filament\Support\Assets\Js; use Filament\Support\Facades\FilamentAsset; public function boot(): void { FilamentAsset::register([ Js::make('fancy-picker', __DIR__ . '/../../dist/fancy-picker.js') ->loadedOnRequest(), ], package: 'my-org/fancy-picker'); } ``` Then in your field class, declare the asset dependency: ```php public function getExtraAlpineAttributes(): array { FilamentAsset::getScriptSrc('fancy-picker', package: 'my-org/fancy-picker'); return []; } ``` Actually, the idiomatic v4 approach is to call `FilamentAsset::getScriptSrc()` inside the view or override `setUp()` to register a `$livewire->js()` call — check your Filament version's asset API for the exact hook, as it evolved between v4 minor releases. --- Step 5: Repeater Compatibility ------------------------------ Repeaters clone DOM nodes. Your Alpine component must reinitialise on clone. Add a unique key: ```blade ``` `wire:key` forces Livewire to treat each repeater row as a distinct DOM subtree, preventing stale Alpine instances. --- Takeaways --------- - Use `$wire.entangle(...).live` for bidirectional state sync; avoid manual `$dispatch`. - Register assets with `loadedOnRequest()` to keep panel payloads lean. - Always `$watch` the entangled state to handle programmatic form changes. - Set `wire:key` on the root element to survive repeater cloning. - Keep PHP configuration fluent; keep mutable UI state in Alpine only. - [filament](https://www.msaied.com/public/articles?search=filament) - [laravel](https://www.msaied.com/public/articles?search=laravel) - [alpine-js](https://www.msaied.com/public/articles?search=alpine-js) - [livewire](https://www.msaied.com/public/articles?search=livewire) Frequently asked questions --------------------------- Can I use `$wire.entangle` without `.live` for performance?Yes — omitting `.live` defers the Livewire sync to the next network request (e.g., form submission). Use `.live` only when the server needs to react immediately to field changes, such as for dependent field visibility. For most pickers, deferring is fine and reduces round-trips. How do I handle server-side validation errors in a custom field?Filament's field wrapper component automatically reads `$errors->get($statePath)` and renders them below the field. As long as your Blade view uses `<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">`, validation messages appear without any extra work on your part. Should the JS asset be compiled into the Filament panel's Vite build or shipped separately?Ship it separately via `FilamentAsset::register()` with `loadedOnRequest()`. Compiling into the panel build creates a tight coupling between your plugin and the consuming application's build pipeline, which breaks for teams using the pre-built Filament CSS/JS. ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp)About the author ---------------- [Mohamed Said](https://www.msaied.com/public#person)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. [About](https://www.msaied.com/public#about) [GitHub ↗](https://github.com/EG-Mohamed) [LinkedIn ↗](https://www.linkedin.com/in/msaiedm/) [WhatsApp ↗](https://wa.me/201094619204) [Email Address ↗](mailto:hello@msaied.com) [My CV ↗](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) [Previous articlePreview Blade Templates in macOS Finder with Quick Blade](https://www.msaied.com/public/articles/preview-blade-templates-in-macos-finder-with-quick-blade) [Next articleDomain-Driven Design in Laravel: Actions, DTOs, and Value Objects Without Bloat](https://www.msaied.com/public/articles/domain-driven-design-in-laravel-actions-dtos-and-value-objects-without-bloat-3) On this page ------------- 1. [Why Custom Field Plugins Deserve a Proper Architecture](#why-custom-field-plugins-deserve-a-proper-architecture) 2. [Step 1: Scaffold the Field Class](#step-1-scaffold-the-field-class) 3. [Step 2: The Blade View with Alpine.js Wiring](#step-2-the-blade-view-with-alpinejs-wiring) 4. [Step 3: The Alpine Component](#step-3-the-alpine-component) 5. [Step 4: Asset Registration via a Service Provider](#step-4-asset-registration-via-a-service-provider) 6. [Step 5: Repeater Compatibility](#step-5-repeater-compatibility) 7. [Takeaways](#takeaways) ### Have a technical challenge? Tell me what you’re building. I reply within two working days. [Start a conversation](https://www.msaied.com/public#contact) Related articles ----------------- [ ![](https://cdn.msaied.com/740/cce86edc21eddcbdd2f2454fadaf9c70.png) · 3 min read### The Pipeline Pattern in Laravel: Custom Pipelines Beyond Middleware 5 Oct 2026 ](https://www.msaied.com/public/articles/the-pipeline-pattern-in-laravel-custom-pipelines-beyond-middleware-1) [ ![](https://cdn.msaied.com/739/2d6897fdcdcf090613f96f72a64b8a78.png) · 4 min read### MySQL Full-Text Search in Laravel: Indexes, Relevance Scoring, and Boolean Mode 4 Oct 2026 ](https://www.msaied.com/public/articles/mysql-full-text-search-in-laravel-indexes-relevance-scoring-and-boolean-mode) [ ![](https://cdn.msaied.com/738/073696a3fefe18bec825beec5ac658f5.png) · 4 min read### Laravel Queue Rate-Limited Middleware: Throttling Jobs Without Losing Work 4 Oct 2026 ](https://www.msaied.com/public/articles/laravel-queue-rate-limited-middleware-throttling-jobs-without-losing-work) Have a technical challenge? ---------------------------- Tell me what you’re building. I reply within two working days. [Discuss your project ↗](https://www.msaied.com/public#contact) © 2026 Mohamed Said · Built with Laravel, meant to last.Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. - [Home](https://www.msaied.com/public) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [GitHub](https://github.com/EG-Mohamed) - [LinkedIn](https://www.linkedin.com/in/msaiedm/) - [WhatsApp](https://wa.me/201094619204) - [Email Address](mailto:hello@msaied.com) - [My CV](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) - [Sitemap](https://www.msaied.com/public/sitemap.xml)