el.js: Build UIs Without Frameworks (Pure JavaScript)

Welcome to my blog! In this first post, I want to introduce my JavaScript library for DOM manipulation: el.js.

you can use el.js from cdn like

html

1

<script src="https://unpkg.com/@slice-code/el.js@1.0.6/el.js"></script> 

<script src="https://unpkg.com/@slice-code/el.js@1.0.6/el.js"></script>

Modern web development is dominated by tools like React, Vue.js, and even older libraries like jQuery. But what if you could build dynamic user interfaces using just plain JavaScript—without build tools, without dependencies, and without complexity?

The Motivation Behind el.js:Frameworks today are great, but they can be overkill. Between heavy setups and mandatory build steps, they often add unnecessary complexity to smaller projects. I created el.js to provide a better alternative:

Lightweight: Minimal overhead.
Flexible: Adapts to your needs.
Zero-config: Works directly in the browser.

for example to use:

javascript

const app = el('div') 
  .child( 
    el('h1').text('Hello World'), 
    el('button') 
      .text('Click me') 
      .click(() => alert('Hello from el.js')) 
  ); 
document.body.appendChild(app.get()); 

const app = el('div')
  .child(
    el('h1').text('Hello World'),
    el('button')
      .text('Click me')
      .click(() => alert('Hello from el.js'))
  );
document.body.appendChild(app.get());

if code compare to vanilla js like this

javascript

const div = document.createElement('div'); 
const h1 = document.createElement('h1'); 
h1.innerText = 'Hello World'; 
const btn = document.createElement('button'); 
btn.innerText = 'Click me'; 
btn.addEventListener('click', () => alert('Hello')); 
div.appendChild(h1); 
div.appendChild(btn); 
document.body.appendChild(div); 

const div = document.createElement('div');
const h1 = document.createElement('h1');
h1.innerText = 'Hello World';
const btn = document.createElement('button');
btn.innerText = 'Click me';
btn.addEventListener('click', () => alert('Hello'));
div.appendChild(h1);
div.appendChild(btn);
document.body.appendChild(div);

key features

Chainable api

javascript

1

el('div').text('Hello').color('red').get() 

el('div').text('Hello').color('red').get()

Built-in Event Handling

javascript

1

el('button').text('clickable button').click(() => {}).get() 

el('button').text('clickable button').click(() => {}).get()

Async-Friendly (Promise support)

javascript

1

el('div').child(fetchData()) 

el('div').child(fetchData())

SVG Support

javascript

1

el('svg') 

el('svg')

Philosophy

el.js is not here to replace frameworks like React or Vue.js.

It exists to give developers:

full control
zero build step
minimal abstraction

What’s Next?

In the next article, I’ll show how to build a simple app using el.js.

key features

Philosophy

What’s Next?

Support My Work