Vaux - a framework agnostic, html aware templating library

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!

https://github.com/zambal/vaux