Vaux - a framework agnostic, html aware templating library

Your Libraries & OS Mentoring Libraries
, ,
1

Hi all,

I just published the first public release of Vaux, a component based and html aware templating library. Recently, I found myself looking for an Elixir templating library, because I wanted to experiment with htmx, a javascript library that I’m sure most here already know about. But for those who don’t, htmx in a nutshell extends html in such a way that it lets you add interactivity and partial page loads to a otherwise static web page. In some way, I think it tries to solve the same problem as Phoenix LiveView, but being purely a client side library, its approach is quite different.

I really like the concept of HEEx templates and Phoenix components, but I guess mostly because of my background that involves mostly dabbling with backend systems, working directly with a simple http server like Bandit or Cowboy has my preference. While I think you techically can just use function components and ignore all other stuff, including Phoenix LiveView in a project feels a bit heavy handed if all you need is html templating. So I thought there’s still some room to fill in the Elixir ecosystem and started building a framework agnostic, html aware templating library.

Originally, my main inspiration for Vaux was Vue templates, as I have used Vue through the years quite a lot and like its simple template syntax. However, I appreciate good editor integration with at least sensible coloring of syntax, so I eventually decided to borrow some syntax from HEEx and take advantage from it’s excellent editor support.

I guess the end result looks a lot like HEEx templates, mixed up with some Vue templating concepts and a couple ideas of my own. Just like HEEx templates,most work is being done at compile time, so I expect performance to be at least in the same order of magnitude. Great care has been taken to provide sensible warnings or errors with correct line number information at compile time in order to catch typos as soon as possible.

The library still needs some work, but should already be pretty usable in its current state. I think the most important functionality that is missing currently is some mechanic for allowing fallthrough attributes (vue lingo, I think this is managed in Phoenix with global attributes) and dealing with style and script elements. style and script elements are currently handled just like any other type of element, but the {...} interpolation syntax doesn’t work well in these contexts.

Hope some find this useful too and would love to have some feedback!

4 Likes
2

I’d suggest using a different sigil to heex. This will be picked up by the heex formatter, which will then complain that it cannot format the contents, so people won’t be able to use heex and vaux in the same project while using the formatter.

1 Like
3

Thanks for the feedback. Vaux currently requires vaux as sigil modifier to differentiate itself from HEEx templates, but I guess this isn’t picked up by the formatter. Do you have a suggestion that let Vaux leverage HEEx template editor support, without tripping up formatters?

4

Ah, I didn’t see that. Not sure if the formatter can work with that. I had the same problem with hologram though, which used to use sigil_H as well and eventually switched to sigil_HOLO with recent elixir versions supporting multi-character uppercase sigils.

5

I see, maybe ~HTML will work too if editors are only looking for ~H. I take no issue in changing the sigil syntax, but I’d really like to prevent needing to add editor support myself.

6

A new version of Vaux has been published at hex.pm that allows for variable interpolation in script and style tags. For example, this means that it’s now possible to write:

<style>
  .someclass {
    min-height: {@height}px;
  }
</style>

More information can be found in the sigil_H/2 documentation.