X_component - component-based HTML templates for Elixir/Phoenix, inspired by Vue

x_component is a component-based HTML template library for Elixir. It uses template syntax and component-based approach similar to Vuejs. This library can replace Phoenix views/templates and phoenix_html in a Phoenix project (details).

  • Declarative HTML template syntax close to Vue.
  • Compile time errors and warnings.
  • Type checks with dialyzer specs.
  • Template code formatter.
  • Inline, context-aware components.
  • Smart attributes merge.
  • Decorator components.
  • Fast compilation and rendering.
  • Optimized for Gettext/Phoenix/ElixirLS.
  • Components generator task.

X components HTML rendering shows slightly better results than EEx with Phoenix.HTML.Engine . It was achieved due to safe/unsafe interpolation syntax (instead of {:safe, ...} tuples) and due to more compact HTML output with trimmed whitespaces (example). However, it shows a significantly faster rendering of nested components (templates in case of EEx) due to the inline components compilation:

X inline (iodata)          20.38 K
X inline (string)          14.48 K - 1.41x slower +19.99 μs
Phoenix EEx (iodata)        7.52 K - 2.71x slower +83.99 μs
Phoenix EEx (string)        6.43 K - 3.17x slower +106.39 μs

Cool! I’m curious how complicated the extensions added to the live view engine are, and whether they translate easily to other templating mechanisms. Is this something you’ve looked at at all?

Doesn’t look like this uses LiveView. I see no mention of that anyway.

I see it listed on the roadmap