Flo0807
Backpex - a highly customizable admin panel for Phoenix LiveView applications
Hello everyone!
I am excited to share our heart project Backpex with you.
After building several Phoenix applications, we realized that we were repeating ourselves when it came to building administration panels. We were writing the same CRUD views, search and filter functionality over and over again. We wanted a tool that would allow us to quickly scaffold these views and focus on building the core functionality of our applications.
The tool we wanted had to be able to serve as a simple backend administration panel in one project, while being the core of the application in another.
We looked at existing solutions, but found that none of them offered the flexibility and customization we were looking for, especially in terms of live updates and LiveView features. We decided to develop Backpex to solve this problem and provide a highly customizable administration panel for Phoenix LiveView applications. Backpex should not only be a simple administration interface for developers, but also a good-looking UI for end users.
Even though Backpex already offers a lot of features, there is still a lot to do. We also have many ideas for future work. That’s why we are very open for contributions and appreciate any help. We have just released a public roadmap and created some issues that are open for contributions on GitHub (see “good-first-issue” label).
We really want to hear what you would like to see next and what is missing. We’d love to hear your feedback!
Hex Package: backpex | Hex
Live Demo: https://backpex.live/
Most Liked
zachdaniel
they didn’t break anything. It’s free, and literally every revision is available on GH. So the thing they already gave you(for free) you still have(for free). They simply released more stuff(for free) that you don’t like when compared to the old stuff(that was free)
There is a conveniently placed “fork” button if you wish to invest the effort in maintaining a version of backpex using tw3.
With all that in mind, there is no “excuse” needed ![]()
arrowsmith
Okay so if anyone else is wondering how to do this, here’s what I did:
- copy
assets/tailwind.config.jsto a new fileassets/tailwind.backpex.config.js. - Update the new config file like so:
content: [
"./js/**/*.js",
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex",
+ "../deps/backpex/**/*.*ex"
],
…
plugins: [
+ require('daisyui')
…
- Add a new tailwind command in
config/config.exsthat compiles backpex-related CSS (including DaisyUI) tobackpex.css:
config :tailwind,
version: "3.4.0",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
cd: Path.expand("../assets", __DIR__)
- ]
+ ],
+ backpex: [
+ args: ~w(
+ --config=tailwind.backpex.config.js
+ --input=css/app.css
+ --output=../priv/static/assets/backpex.css
+ ),
+ cd: Path.expand("../assets", __DIR__)
+ ]
- Add a new watcher in
config/dev.exs:
config :my_app, MyAppWeb.Endpoint,
…
watchers: [
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+ tailwind_backpex: {Tailwind, :install_and_run, [:backpex, ~w(--watch)]}
]
Then add this line in your backpex layout so it loads the new CSS:
<link phx-track-static rel="stylesheet" href={~p"/assets/backpex.css"} />
Hope that helps someone.
Flo0807
Backpex v0.8 release - Starting to support Ash
We’ve just released a new version of Backpex. We have asked for feedback many times in the past, and by far the most requested feature was Ash support.
So this release lays the foundation to support multiple data sources (e.g. Ash).
With v0.8 we introduce an adapter module that sits between the UI and the data. We tried to move all current Ecto specific code into an Ecto adapter and have already started to implement an Ash adapter.
We added a new helpdesk section to our demo application that lists tickets that are retrieved from an Ash resource.
There is still some Ecto code that we need to move to the Ecto adapter. Moreover, the adapter pattern / API in Backpex is in an early alpha stage and is likely to change in the future.
In addition, the ash adapter is limited to listing and displaying items. You can’t edit items, use filters or delete items. Therefore, we recommend that you do not use the Ash adapter in production code. If you use the Ecto adapter, everything works as before.
However, we wanted to release these WIP changes as early as possible to get feedback from you and let you experiment with them. What are you looking for besides editing, filtering and deleting?
This release has some breaking changes, so make sure to read the upgrade guide. The guide also contains more information about the adapter pattern.
Release Notes: Release 0.8.0 · naymspace/backpex · GitHub
Upgrade Guide: Upgrading to v0.8 — Backpex v0.17.1
Flo0807
Backpex v0.11 release - removal of Alpine.js dependency
We’ve just released Backpex v0.11. This release focuses on the developer experience by removing Alpine.js as a dependency and making the installation process much easier.
So you can finally remove Alpine.js from your application if you only installed it because of Backpex ![]()
Note that you’ll now have to add our custom hooks (see the upgrade guide for more information).
Key Highlights:
- Replace Alpine.js with JS hooks
- Add external upload support for the upload field
- Add
after_mainposition torender_resource_slot/3
Make sure to read the full release notes for all changes and new features that have been added.
We’ve also continued development on the adapter pattern and fixed some bugs.
As always, thanks to all external contributors ![]()
Release Notes: Release 0.11.0 · naymspace/backpex · GitHub
Upgrade Guide: Upgrading to v0.11 — Backpex v0.17.1
eileennoonan
Hi @lawik, thanks for the kind words!
Up to now, yes, I haven’t been able to fully use Ash policies because the current_user aka actor isn’t present everywhere queries are being made.
I know that the Backpex folks added the assigns in more places with the 0.14 release, but I haven’t been able to dig deeply into that yet.
Some backstory on this integration - I started it so that I could use it in my own application for my web accessibility startup called Insi. Since then, I have been extremely busy with other aspects of this startup, and haven’t had the bandwidth to push ash_backpex any further than what met Insi’s immediate needs.
However, I’m going to. We can get away with limited authz for the moment because we’re only using it as an internal admin for now. The whole thing is walled off. But we will eventually want a more full-featured customer-facing admin as well as all the other Backpex bells and whistles.
My dream is to get it all hooked up with Igniter and be able to present a demo of creating a full featured AshBackpex app in like 15 minutes via the command line.
I guess I’m writing all this extra stuff to say I’m worried people think I have abandoned this - I have not! We have an #ash_backpex channel in the Ash Discord and Zach Daniel and other Ash maintainers have already been a big help!







