🔗 Phoenix LiveView + Headless UI

This article describes how to use Headless UI Javascript components in Phoenix LiveView using Web Components.

The JS components serve as "sprinkles" to fill the small gap that LiveView leaves: Feature-rich, well-tested client-side components that provide immediate user feedback, for example comboboxes.

The described approach notably

• ✅ builds the JS components in React using Headless UI,
• ✅ wraps the JS component as a web component (more specifically: as a custom element),
• ✅ is not limited to Headless UI, but allows for arbitrary react components,
• ✅ maintains the minimal esbuild based assets pipeline,
• ✅ stores durable state server-side (e.g. selected value in a combobox),
• ✅ stores ephemeral state client-side (e.g. query string in a combobox),
• ✅ integrates with LiveView forms.

On the downside, this approach does not

• ❌ build the JS components in Vue.js,
• ❌ render the components to the shadow DOM.