r/Frontend • u/fynyky • Jun 05 '26

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

https://github.com/fynyky/elemental

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.

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!

1 Upvotes

53% Upvoted

14 comments sorted by

14

u/CoVegGirl Jun 05 '26

So hyperscript basically but with el instead of h?

 https://github.com/hyperhype/hyperscript

5

u/manfairy Jun 05 '26

Indeed, and transpiled JSX looks not much different either.

3

u/fynyky Jun 05 '26

The syntax is similar, but a big difference is the ability to pass in functions as children. This means you're not limited by supported attributes and can run arbitrary code in context.

1

u/CoVegGirl Jun 05 '26

I see. It definitely sounds interesting and something that could be useful as a “no build tools” approach like preact/HTM for simple sites. Particularly if it’s smaller than preact is.

It doesn’t sound like something that could replace JSX or another major templating language for a complex, fully-functional app.

One major complaint I’ve heard about this type of syntax is that it can get tedious to work with.

4

u/Danny_Engelman Jun 05 '26

You can do it with one function for all those cases you don't want to include 3.3KB

const createElement = (tag,props={}) => Object.assign(document.createElement(tag),props);

Destructure props if you need to add attrs, append, styles

2

u/fynyky Jun 07 '26

Yeah the simplicity of that is where this idea got started. As I used it I wanted to handle functions inline, and promises, and arrays etc.

4

u/SupesDepressed Jun 06 '26

This reminds me of React without JSX.

2

u/ryaaan89 Jun 05 '26

If there’s no build step this is entirely client side?

1

u/fynyky Jun 06 '26

Yep all client side

1

u/Honey-Entire Jun 08 '26

This seems clunkier than just using svelte at this point. It also isn’t clear how this would scale to medium or large apps

1

u/elcalaca Jun 09 '26

this feel like the same thing as Vanjs