Phx_component_helpers - Extensible live_components, without boilerplate

Hey there :wave:

A few days ago I extracted a lot of functions I’m using in 2 different projects (one large phoenix LiveView project and a small PETAL app)

It basically answers to the following needs:

  • quickly package UI code into live_components
  • make components extensible from the templates (in the spirit of Tailwind & Alpine)
  • less boilerplate possible.

I first tried Surface, and even if I was impressed, it felt too heavy for me (btw it has more line of codes than LiveView itself) and I’d really prefer to stay closer to the underlying library (LiveView)

Let me know what you think of this lib :hugs:


0.7.0 just landed with improved support for form errors

1 Like

0.8.0 :rocket:

I’m still (I guess) the sole user of this library, but for whatever reason I’m polishing it as if it were to be used by thousands :sweat_smile:


Just released 0.9.0 with new forward_assign/2 that will help writing nested components (you often need to propagate part of assigns to a child component)

Feature-wise there is now everything I wanted in this library.
It just needs a bit more example & documentation before a proper 1.0 release


Pas mal tout ça. :call_me_hand:

I have a form I need to refactor and I might give it a shot while testing your library.
Thanks for continuing working on it and giving us heads-up, I missed the other announcements.


Thank you @crova !
I will actually provide a form code sample very soon. I will post here as soon as it is published!


A glimpse of some of the components we’re writing with phx_component_helpers :eyes:
A table with infinite scroll, sticky headers, sorting, filtering, placeholder, result counter … coming for really cheap to our front-end developpers :slight_smile:

Code source is really neat with proper component encapsulation :ok_hand:


Really good work! Is it the alpine js keeping the left hand side of the page static where the right hand side updates only?

1 Like

No alpine there: only using plain JS (there is actually a single 50 loc JS file for the infinite scroll hook).

The static sidebar on the left is part of the layout, no special trick here, LiveView doesn’t know anything about the layout.

We also use Turbolinks to manage page to page navigation.