A tiny helper for a big part of the web

Make the DOM
feel simple.

Create, select, style, and update elements with a lightweight API that keeps your JavaScript clear and your ideas moving.

Try the playground Explore the docs

Plain JavaScript. No framework required.

a little DOM magic

import LucidDOM from
  './lucidDOM.js';

const app = new LucidDOM(
  document.querySelector('#app')
);

const note = app.addElement({
  tag: 'p',
  value: 'Hello, clearer code.'
});

note.styles({
  color: '#e88718'
});

Small API, familiar web platform

Less friction, more flow

The essentials, within reach.

LucidDOM wraps the everyday DOM tasks in a small, approachable set of helpers.

Create with ease

Build an element, set useful attributes, and add it to your page in one call.

app.addElement(options)

Find what you need

Use familiar CSS selectors to find elements inside the parent you choose.

app.select('.card')

Make changes quickly

Update content, listen for events, apply styles, and remove elements with a handy handle.

handle.update(options)

A hands-on hello

Give it a little click.

This tiny counter is wired up with LucidDOM. Select the buttons, listen for clicks, and update the number—no framework in sight.

See how it works

LIVE DEMO

Your count