How we increased the productivity of writing admin panels using Filament

Today we want to share our experience developing admin panels (CMS) using Filament – an extremely powerful library of Fullstack components based on the Laravel framework and Livewire technology.

We use Laravel as the main framework for developing the backend of all our projects, and one day the question arose: which solution for admin panels to choose? We settled on Filament – then still a crude, small, almost undocumented open-source admin panel.

As time has shown, not in vain.

In this article we will not compare Filament with other admin systems, since it does not really fit into the format (especially since others have already done this). However, it is important to note that we spent quite a long time choosing between Filament and another, in our opinion, more popular among the Russian-speaking Laravel community, library – Orchid (domestic admin panel with a DIY philosophy).

We worked on several projects on Orchid in parallel with projects on Filament and settled on the latter. We'll try to explain why we think Filament is perhaps the best choice you can make if your business involves writing a CMS.

Why do you need a CMS at all?

We think everyone knows that not a single corporate website/online store can exist without a convenient content management tool. A powerful CMS should provide tools that make it easy to create, edit, and publish different types of content.

Filament is one of those tools that does not provide a ready-made solution. You must create the necessary sections yourself, describe the fields and relationships for your entities.

Getting started with Filament

Connecting Filament to your project is very easy. It is enough to pull it up through composer and run the command artisan filament:install –panels and create an admin user artisan make:filament-user.

Now, following the /admin path, you will see an empty dashboard. This completes the minimal setup of Filament.

Sections (here called resources), pages, themes, panels, widgets and more are also generated by commands artisan make:filament-*, after which they are edited to suit the needs of the project.

Here are some cool features of Filament that definitely put it ahead among other admin applications.

No JS

You don't need to resort to using javascript at all to build pages. In Filament, all resource code is written in resource classes, in a declarative style in the PHP programming language, and the resource itself is conveniently divided into two parts – a form and a table, which are responsible for page-by-page display of all records and viewing/displaying individual records, respectively. Also, all the necessary sorting and filtering are prescribed in the resources, and this is done extremely simply.

In code it looks something like this:

And the result is like this:

You will notice that you can customize labels and make this or that column searchable. You can also disable components, hide them, and perform other arbitrary manipulations depending on some state. That is, the admin panel on Filament is also interactive.

If you think that this is not enough, you can easily write custom javascript with any logic you need. The script can be either global (it will work on any page) or for a specific page.

Components

Filament is positioned as a set of beautiful and functional components. This allows you to significantly speed up the process of creating administrative panels and focus on the application logic.

Forms with various field types and validation facilitate the data entry process. Tables with the ability to sort, filter and paginate are designed for convenient display of data. Charts help you visualize data, and dashboards allow you to create informative dashboards.

Screenshot of the dashboard from the official Filament demo:

Access to resources

A useful feature of Filament is its support for controlling user access to various admin panel resources through Laravel policies. You simply describe the usual policies for your models and Filament resources will automatically restrict access to users who do not meet the rules.

This allows you to flexibly configure user access rights.

Customization

Almost everything can be customized. Starting from accent colors to page layout using Livewire. You can cut out unnecessary functionality or, conversely, add what is missing.

Scalability

Filament is easily scalable. You can write resources that are independent from each other or entire admin panels that are independent from each other within the same repository. This allows you to avoid worrying about the fact that your code in one section may break something in another.

Or you can keep several versions of admin panels for users with different roles.

Filament also handles huge amounts of data, complex shapes, interactivity, and working with media very easily. It is unlikely that you will encounter the problem that you cannot do something in Filament. Even if it's an undocumented feature.

Dependency Injection

In any method of any Filament component to which a callback can be passed, this callback can be modified by declaring parameters in it that will be resolved by Filament depending on the name of the parameter.

So you can pass $record to the callback and this parameter will contain the instance of the model with which the form works. Thanks to this, you can, for example, check the values ​​of the fields of a record.

Or another option – the $get and $set parameters allow you to get or set the value of any field on the form at any time.

It looks something like this:

Active developer community

Filament is known for its large and active community that develops and supports it. This ensures that the library is up-to-date in the Laravel ecosystem and in principle.

Documentation and training materials

Filament has high-quality documentation and many examples. Not everything is documented, but the community has released many articles with a variety of cases. The documentation is easy to read and covers almost all aspects of working with the library.

To tell the truth, this was not the case before, and only starting with the third version of the library, Filament maintainers took a strong grip on the documentation.

A little about the cons

Since Filament uses the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire), it may perform worse than an admin panel written in any js framework. For each update of interactive fields, a request is sent to the backend.

So, the application may slow down if it is not written correctly. But even this can be solved by caching.

Total

If you have not yet decided what to use to write admin pages for your projects, or if you already have existing projects, we strongly recommend that you try Filament.