Extensible Phoenix LiveView component helpers that reduce boilerplate for HTML attributes, CSS classes, and form handling.
PhxComponentHelpers is a library for Phoenix LiveView that provides helper functions to make components more configurable and extensible directly from templates. It simplifies the creation of reusable UI components by handling common patterns like attribute setting, class merging, and form integration with minimal code.
Phoenix LiveView developers building reusable UI component libraries, especially those using the PETAL stack (Phoenix, Elixir, TailwindCSS, Alpine.js, LiveView).
Developers choose PhxComponentHelpers because it offers lightweight syntactic sugar to eliminate repetitive boilerplate in component code without introducing a new framework, keeping close to raw LiveView templates while enhancing configurability.
Extensible Phoenix liveview components, without boilerplate
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Provides helper functions like set_attributes and set_phx_attributes to handle HTML, data, and LiveView attributes with validation, eliminating repetitive boilerplate code in components.
Supports prefixed attributes such as @click and x-bind: for easy binding of Alpine.js dynamic behaviors directly from templates, as demonstrated in the PETAL stack examples.
Offers extend_class to merge and override Tailwind CSS classes with template-level overrides, enabling flexible styling without breaking component defaults.
Includes functions like set_form_attributes to work with Phoenix.HTML.Form, simplifying form component creation and data binding, as shown in the form examples.
Unlike full UI frameworks, it only provides helpers, so developers must build all components from scratch, which can be time-consuming for complex or large-scale UIs.
Many features, such as Alpine.js prefixed attributes and Tailwind class merging, are tailored for the PETAL stack, reducing its utility in projects using other CSS or JS tools.
As a lightweight helper library, it lacks advanced capabilities like server-side rendering optimizations or state management found in frameworks like Surface, per the README comparison.