⚡ mutadom

A lightweight, chainable DOM creation and mutation library.

No frameworks. No JSX. Just pure JavaScript with control.

---

🚀 Why mutadom?

Creating and managing DOM elements in vanilla JS gets messy fast.

mutadom gives you:

• 🧩 Clean element creation
• 🔗 Chainable API
• 🎨 Style & attribute control
• ⚡ Built-in events, transitions, and animations
• 🧠 Simple, readable code

---

📦 Install

npm install @akpandey-dev/mutadom

Usage

1. Using with Node / Bundlers (Recommended)

Works with tools like Vite, Webpack, Parcel, etc.

import { create, appendTag } from '@akpandey-dev/mutadom';

const el = create('h1', 'Hello Mutadom!');
appendTag(el, document.body);

2. Using in Browser (via CDN)

Use directly in browser without installing:

<script type="module">
import { create, appendTag } from 'https://cdn.jsdelivr.net/npm/@akpandey-dev/mutadom/src/index.js';

const el = create('h1', 'Hello from CDN 🚀');
appendTag(el, document.body);
</script>

3. Using Locally (without bundler)

If installed via npm, then in HTML:

<script type="module">
import { create, appendTag } from './node_modules/@akpandey-dev/mutadom/src/index.js';

const el = create('h1', 'Local usage');
appendTag(el, document.body);
</script>

⚠️ Important

Browsers do not support package names like:

import { create } from '@akpandey-dev/mutadom'; // ❌ won't work directly

Use a bundler or CDN instead.

Example

const el = create('button', 'Click Me')
  .modifier('style', {
    backgroundColor: 'red',
    color: 'white'
  })
  .modifier('event', {
    click: () => alert('Hello from mutadom!')
  });

appendTag(el, document.body);

For a live example, check examples/demo.html. The file will not work locally, either serve it using npx serve . on localhost first, or visit GitHub pages of this repository.

Core API

create(tag, content, attrs)

Create an element.

create('div', 'Hello World', { class: 'box' });

Supports:

• string content
• nested arrays
• DOM nodes

.modifier(type, obj)

Enhance elements with chainable modifiers.

//🎨 Style
el.modifier('style', {
  color: 'red',
  backgroundColor: 'black'
});
//🏷 Attributes
el.modifier('attr', {
  id: 'main',
  disabled: true
});
//⚡ Events
el.modifier('event', {
  click: () => console.log('clicked')
});
//🎬 Animation
el.modifier('animation', {
  name: 'fadeIn',
  duration: 300
});
//🔄 Transition
el.modifier('transition', {
  property: 'all',
  values: { transform: 'scale(1.2)' },
  duration: 300
});

appendTag(child, parent)

Append element to DOM.

appendTag(el, document.body);

Or using selector:

appendTag(el, '#app');

Example (Real Usage)

const card = create('div', [
  ['h2', 'mutadom'],
  ['p', 'Build UI without frameworks']
])
.modifier('style', {
  padding: '20px',
  backgroundColor: '#111',
  color: '#fff'
});

appendTag(card, document.body);

Philosophy

mutadom is built for:

• developers who like control
• beginners who want simplicity
• people tired of heavy frameworks

⚠️ Notes

• Designed for browser environments
• No dependencies
• Lightweight and fast

Future Plans

• Module support (ESM)
• Better composition patterns
• Utility helpers

License

MIT