🥵 Coming soon: Build Filament components with React / Vue / Svelte / your JavaScript framework of choice?! I started with just form fields to prove the concept as these can have complex interactions, it won't be difficult to allow widgets etc. to be build like this too!

These can interact with the rest of your Filament form too! Use `$get()` and `$set()` to read and update other fields, pass dynamic configuration from PHP which updates the props passed to the component automatically, or call methods on your field class using `#[Exposed]`.

The components are loaded on demand as ES modules when the field initializes, so you don't need to load React on every page just because one field uses it. Filament doesn't ship any of these frameworks itself, and plain JavaScript works too!

I've added generators for all of these too: `php artisan make:filament-form-field Counter --react` Also `--vue`, `--svelte`, or `--js`, with `--ts` if you want TypeScript. What would you build with this? Any existing JS components you've wanted to bring into Filament?

This looks absolutely amazing @danjharrin 🙌 Could an extreme version of this allow the use of ShadCN UI for example to replace all of the default filament components? On a slight aside, I could see this as a major unlock for JS/TS devs engaging with Filament.

An extreme version would allow you to replace all of the default form fields using ShadCN form fields. But I would suggest that you are selective about which ones you outright replace. Reskin components with (theme) CSS to make them look identical to ShadCN where possible.

That makes sense, thank you! Really looking forward to this release. 🎉

Inertia + tsx would be the dream framework

Pure magic!

Looking forward to this

Dan you've been working hard recently. All i would say is that you're doing a mighty work of art for @laravel community🔥🔥

Is it inspired from minglejs?

I think it solves a similar sort of problem, but the implementation is original and built for Filament schema components specifically rather than being a general Livewire solution.

Oh 😯 intresting I was working on package for Laravel client side validation almost ready added filament support via extra attributes. Let's see how this make my life easy/hard to finish that project up!

We are finally getting there. Who says we can't have the best of both worlds? I have been using react in Filament for special custom pages using Minglejs.

This is awesome

Amazing work Dan! This is fire! 🔥

awesome

This is awesomeeeeeee! I was debating Filament vs Inertia+Vue for an internal CRM rewrite and given this I'm so glad I chose Filament.

I am working on something else you might like then 👀

👀👀

Feeling filament is just getting better and better everyday, thank you for your efforts

So cool! I can already see some real use cases for this😄

@filamentphp 💛

This is huge!!!

Really useful for putting in things like custom code editors without reinventing the wheel to do it

That's the way to go @danjharrin , Can't wait to see Filament Apps powered by React/Vue/Swelte.

Well its look like laravel + inertia + react now!

@filamentphp 🚀

Please add support for building Custom pages with react/vue.

It's just awesome, i can't wait to be able to use it

Instead of just form fields, cant we make full pages with js/ts/svelete/react etc I have a page in my filament application that needs alot of things client side, i have to use blade, livewire(lil bit), but its getting out of hand, having jsx would be awesome in such cases

many dev leaving livewire as in the past has big security issues many dev change to inertia as we can switch easily between frontend stack

@filamentphp This is huge! We’ve got some use cases for this atm and I’ve been reluctant to use/rely on that mingle library