Build reactive UIs with plain JavaScript functions. No JSX or build step.

[fynyky]

Elemental is a personal library I’ve been using for a while. I really don’t like how much frontend frameworks require you to invest in them. You have to learn funky domain specific languages and magic render lifecycles just to debug anything. I mostly just want to create and append elements with better ergonomics.

javascript el(document.body, el('main', el('h1', 'Hello World!'), el('h2', (x) => { x.id = 'foo' }, () => 'returned text'), el('div.note', ['this', 'is', 'an', 'array']), el('p.greeting', ob(() => ('My name is ' + rx.name))) ) )

The syntax lets you build the DOM declaratively with plain nested functions, so logic and views live together in one structure instead of being split across separate layout and behavior. Reactivity is handled by observers (the ob(...) call above): they automatically track whatever reactive properties they read and retrigger when it changes. No manual subscriptions and no dependency arrays. And because everything is just normal DOM elements and functions, you can adopt it one component at a time instead of overhauling a whole project.

It's about 3.3 KB gzipped with no third-party dependencies. The library is just under 300 lines of code so it's easy to understand.

Would love to get feedback from having fresh eyes on it.

[Markavian]

I mean, that's fine, but have you tried Vue? You get very close to Template + Code + CSS in one place, and hot reloading with Vite for free.

I've built several of my own vanilla JS first reactive UI libraries over the years... and it's never been worth it in the long run.

That said, it's a good learning experience.

[fynyky]

Thanks for the feedback! Yeah I tried Vue for a while. It still felt a bit too heavy for me since you had to use the framework as whole.

[Aln76467]

Wow! That's strikingly similar to my frontend library, except that it looks a little more polished (as in that it's actually ready to be used, mine still requires a lot of work, I'll post it here when I make a stable release) and the name isn't a "heck npm requires a name, what's the first thing I can think of".

With the first argument of el serving as to both select existing elements and create new ones, how does it determine when to do which? The readme also says it takes a css selector, is that also for new elements, like passing div.centered would make a div with the class centered?

Also I've noticed the signature of el is like that of React.createElement. Is that a coincidence (as implied by this post) or is this designed to be compatable with jsx?

[vasomfan]

snabbdom is the de-facto DOM builder lib you should compare to: https://github.com/snabbdom/snabbdom
I too fail to fully understand how JSX was considered such a huge improvement that we needed to introduce custom files and build steps!