cblavier
Hey there 
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)
https://github.com/cblavier/phx_component_helpers
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 
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
cblavier
0.7.0 just landed with improved support for form errors
cblavier
0.8.0
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
https://github.com/cblavier/phx_component_helpers/blob/main/CHANGELOG.md
cblavier
Just released 0.9.0 with new
forward_assign/2that 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
crova
Pas mal tout ça.
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.
cblavier
Thank you @crova !
I will actually provide a form code sample very soon. I will post here as soon as it is published!
cblavier
A glimpse of some of the components we’re writing with
phx_component_helpersA table with infinite scroll, sticky headers, sorting, filtering, placeholder, result counter … coming for really cheap to our front-end developpers
Code source is really neat with proper component encapsulation
cenotaph
Really good work! Is it the alpine js keeping the left hand side of the page static where the right hand side updates only?
cblavier
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.
cblavier
As we started to get an ever growing list of components and were also looking to get stronger UI guidelines (I’m looking at you Tailwind colors
) we built our own storybook (inspired from React’s)
Here is a preview:
https://s3.gifyu.com/images/storybook.gif
te_chris
Liveview storybook is super interesting to us. We have a LOT of components.