omohokcoj

omohokcoj

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:

Comparison:
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

First Post! Switch mode

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

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?

Last Post!

sfusato

sfusato

I see it listed on the roadmap

Where Next?

Trending in Announcing Top

bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
385 14863 120
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
shahryarjb
The Chelekom project is a library of Phoenix and LiveView components generated via Mix tasks to fit developer needs seamlessly. One of i...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
quatermain
Hello, I’m sharing my plugin here in forum after some time so it has time to mature and proof yourself. I use Claude Code daily on a pr...
New

Other Trending Topics Top

type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
bjorng
We want to introduce a new native datatype to Erlang: native records. Although replacing all tuple records with native records is not our...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
yureehuh
Introduction Founded in 2017 by landscape ecologist and fire mitigation expert Harry Statter, Frontline developed the first fully integra...
New

We're in Beta

About us Mission Statement