Developer Notes

Using alpine.js' x-data attribute in HEEx templates

September 21, 2021

Phoenix 1.6 (available as a release candidate at the time of writing) uses LiveView 0.16, and with it comes a new HTML engine called HEEx. HEEx is HTML-aware, so you will get a compile-time error if your template has errors such as missing closing tags, and it provides a convenient, HTML-like syntax for injecting function components.

One major gotcha with HEEx templates is that you can no longer use the familiar <%= ... %> interpolation syntax with HTML attributes. E.g where you could previously do this:

<div class="<%= @class %>">...</div>

you will now have to do this instead:

<div class={@class}>...</div>

You can still use the <%= ... %> syntax for interpolation in the HTML body.

The new syntax is nice and compact, but we ran into difficulties converting a template that uses Alpine.js to HEEx. In that template we have an enabled/disabled toggle button that we animate with Alpine.js. Before converting to HEEx we could provide the initial value of the toggle dynamically using an @enabled assign, like this:

<div x-data="{ enabled: <%= @enabled %>}">...</div>

Unfortunately, a straight translation to the new syntax doesn't work:

<div x-data="{ enabled: {@enabled} }">...</div>   # This doesn't work


After some unsuccessful experiments with alternative (messy) ways of writing this, we eventually gave up and started looking for a workaround. HEEx lets you set multiple dynamic attributes like this:

<div {@dynamic_attrs}>...</div>

where @dynamic_attrs is a keyword list or a map containing key/value pairs for the dynamic attributes, e.g [id: "toggle", class: "enabled"]

Using this approach, we did this in our mount function:

def mount(_params, _session, socket) do
{:ok, socket |> assign(dynamic_attrs: [x_data: "{enabled: true}"]

In our template we then used the <div {@dynamic_attrs}>...</div> syntax shown above to get the toggle working.

← Back to articles