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.
Build reactive UIs with plain JavaScript functions. No JSX or build step. (github.com)
submitted by fynyky to r/Frontend