One function.
Every command.

Core Selector

The µ() function is the single entry point for element selection and DOM commands.

µ(el, fns?) sync

Selects one or more elements and optionally runs a set of commands on them. Returns the element(s) or the last command result.

µ('#app')                         // single element (querySelector)
µ('/.card/')                      // all .card elements (querySelectorAll)
µ(['.item', '#list'])             // .item scoped inside #list
µ('<div class="box"></div>')     // create element from HTML string

// Select + run commands
µ('#title', { text: 'Hello' })
µ('/.item/', { css: { opacity: '0.4' } })

// Multiple commands in one call
µ('#btn', {
  css:     { fontWeight: 'bold' },
  classes: { add: 'active' }
})

DOM

Set content, insert nodes, and restructure the DOM.

html sync

Sets innerHTML on the selected element(s).

µ('#container', { html: '<p>Hello <b>world</b></p>' })
µ('/.card/', { html: '<span>updated</span>' })   // applies to all

text sync

Sets textContent. Safer than html — no HTML parsing, no XSS risk.

µ('#status', { text: 'Loading…' })
µ('/.label/', { text: 'click me' })

insert sync

Appends an HTML string or existing element as the last child of the selection.

µ('#list', { insert: '<li>New item</li>' })

const el = µ('<div class="row"></div>')
µ('#table', { insert: el })

after sync

Inserts a node immediately after the selected element in the DOM.

const hint = µ('<span class="hint">required</span>')
µ('#email', { after: hint })

wrap sync

Wraps the element (or each element in a NodeList) inside a shallow clone of the given wrapper.

const card = µ('<div class="card"></div>')
µ('#content', { wrap: card })

// NodeList — each element gets its own clone
µ('/.item/', { wrap: card })

Events & Iteration

Attach event listeners and iterate over selections.

on sync

Attaches event listeners. Supports single events, multiple names, and delegated listeners.

// Single event
µ('#btn', { on: { e: 'click', fn: e => console.log(e) } })

// Multiple events — same handler
µ('#input', { on: { e: ['focus', 'blur'], fn: e => console.log(e.type) } })

// NodeList — each element gets the listener
µ('/.btn/', { on: { e: 'click', fn(e) { console.log(e.currentTarget.id) } } })

// Array of configs
µ('#el', { on: [
  { e: 'mouseenter', fn: () => show() },
  { e: 'mouseleave', fn: () => hide() }
] })

each sync

Iterates over a NodeList or single element, calling the callback for each node.

µ('/.item/', { each: el => console.log(el.dataset.id) })

proceed sync

Replaces the internal selection with the return value of the callback. Useful for custom traversal.

µ('#child', { proceed: el => el.closest('.section') })

Traversal

Navigate the DOM relative to the current selection.

find sync

Searches within the current element for descendants matching a selector. Slash-wrap for all matches.

µ('#card', { find: '.title' })     // first match
µ('#list', { find: '/.item/' })    // all matches

prev / next sync

Moves selection to the previous or next sibling element. Optional CSS filter walks until a match is found.

µ('#item2', { prev: null })           // immediate previous sibling
µ('#item2', { next: null })           // immediate next sibling
µ('#item2', { next: '.active' })      // next sibling matching .active

parents sync

Collects all ancestor elements up to the document root. Optional CSS filter.

µ('#child', { parents: null })
µ('#child', { parents: '.section' })

children / childs sync

children uses .children (elements only). childs uses .childNodes (includes text nodes). Both accept an optional CSS filter.

µ('#nav', { children: null })        // direct child elements
µ('#nav', { children: 'a' })         // only <a> children
µ('#nav', { childs: null })          // includes text nodes

siblings / siblingsAll sync

siblings excludes the element itself. siblingsAll includes it.

µ('#tab2', { siblings: null })
µ('#tab2', { siblings: '.active' })
µ('#tab2', { siblingsAll: null })

filter sync

Filters a NodeList to elements matching a CSS selector.

µ('/.item/', { filter: '.active' })

first / last sync

Narrows a NodeList to its first or last element. first accepts an optional CSS filter.

µ('/.card/', { first: null })
µ('/.card/', { first: '.featured' })
µ('/.card/', { last: null })

Style & Attributes

Set inline styles, manipulate classes, and read/write HTML attributes.

css sync

Sets inline CSS properties. Keys are camelCase property names.

µ('#box', { css: { width: '200px', opacity: '0.5', backgroundColor: '#222' } })
µ('/.item/', { css: { display: 'none' } })

classes sync

Manipulates CSS classes. Supports add, remove, and toggle — each accepts a class name or an array.

µ('#btn', { classes: { add: 'active' } })
µ('#btn', { classes: { remove: ['active', 'open'] } })
µ('#btn', { classes: { toggle: 'visible' } })

// NodeList
µ('/.tab/', { classes: { remove: 'active' } })

attr sync

Get, set, remove, or toggle HTML attributes. Keys: set · get · del · has · tog · list.

µ('#img',   { attr: { set: { src: '/logo.png', alt: 'Logo' } } })
µ('#input', { attr: { del: 'disabled' } })
µ('#panel', { attr: { tog: 'hidden' } })

Static Helpers

Utility methods attached directly to µ. No element selection needed.

µ.e(name, detail?, bubbles?) sync

Creates a CustomEvent. Pass bubbles: false for a plain Event.

const ev  = µ.e('app:ready', { version: '2.0' })
const ev2 = µ.e('close', null, false)   // plain Event, no bubbling

µ.l(node, event, fn) sync

Shorthand for node.addEventListener(event, fn).

µ.l(document, 'keydown', e => console.log(e.key))
µ.l(window,   'resize',  onResize)

µ.d(event, node?) sync

Dispatches an event on a node.

µ.d(µ.e('app:update', { data }), document.getElementById('root'))

µ.t(event, selector?) sync

Returns event.target after calling preventDefault() and stopPropagation(). With a selector returns target.closest(selector).

btn.addEventListener('click', e => {
  const el   = µ.t(e)             // target, propagation stopped
  const card = µ.t(e, '.card')   // closest .card ancestor
})

µ.a(obj, type?) sync

Converts objects or array-likes. No type: Object.entries(). 'array': Array.from(). Also 'keys' / 'values'.

µ.a({ a: 1, b: 2 })             // [['a',1],['b',2]]
µ.a(nodeList, 'array')          // [...nodeList]
µ.a({ a: 1, b: 2 }, 'keys')    // ['a','b']

µ.ax(options) async

XHR-based AJAX. Returns a Promise → { response, status, xhr }. Auto-serialises JSON bodies and parses JSON responses.

const { response } = await µ.ax({ url: '/api/items', data: { page: 2 } })

await µ.ax({ url: '/api/save', method: 'POST', data: { name: 'Alice' } })

Slide

Height-based CSS transition animations. Handles padding & margin, saves display state.

slideUp async

Collapses height to zero then sets display:none. Saves the original display value for slideDown.

µ(el, { slideUp: { t: 400 } })
µ(el, { slideUp: { t: 'fast', fn: () => el.remove() } })

slideDown async

Expands from zero to natural height. Restores the display value saved by slideUp.

µ(el, { slideDown: { t: 400 } })
µ(el, { slideDown: { t: 'slow', fn: () => console.log('open') } })

slideToggle async

Calls slideUp if visible, slideDown if hidden.

µ(el, { slideToggle: { t: 300 } })

Fade

Opacity-based CSS transition animations.

fadeIn async

Sets display then transitions opacity 0 → 1.

µ(el, { fadeIn: { t: 400 } })
µ(el, { fadeIn: { t: 300, display: 'flex' } })

fadeOut async

Transitions opacity 0, then sets display:none.

µ(el, { fadeOut: { t: 400 } })
µ(el, { fadeOut: { t: 200, fn: () => el.remove() } })

fadeToggle async

Fades in or out based on current visibility.

µ(el, { fadeToggle: { t: 300 } })

fadeTo async

rAF tween to a specific opacity value. Does not hide the element afterward.

µ(el, { fadeTo: { t: 600, opacity: 0.3 } })
µ(el, { fadeTo: { t: 400, opacity: 1   } })

Show / Hide

rAF opacity tween combined with display toggling.

show async

Sets display then tweens opacity 0 → 1.

µ(el, { show: { t: 300 } })
µ(el, { show: { t: 300, display: 'grid' } })

hide async

Tweens opacity to 0 then sets display:none.

µ(el, { hide: { t: 300 } })
µ(el, { hide: { t: 200, fn: () => cleanup() } })

toggle async

Calls show or hide based on current visibility.

µ(el, { toggle: { t: 300 } })

Animation

Generic rAF tween engine for any numeric CSS property.

animate async

Tweens any set of numeric CSS properties simultaneously. Reads current computed values as start points. Returns a Promise that resolves on completion.

// Single property
µ(el, { animate: { props: { width: 300 }, t: 500 } })

// Multiple properties — simultaneous, same easing curve
µ(el, { animate: { props: { left: 200, top: 100, opacity: 0.8 }, t: 600 } })

// With easing and callback
µ(el, { animate: {
  props:  { width: 400, height: 300 },
  t:      800,
  easing: 'easeInOut',
  fn:     () => console.log('done')
} })

// Queue — runs sequentially on the same element
µ(el, { animate: { props: { width: 300 }, t: 400 } })
µ(el, { animate: { props: { width: 100 }, t: 400 } })

// Await
await µ(el, { animate: { props: { opacity: 0 }, t: 300 } })
el.remove()

Control

Manage running and queued animations.

stop sync

Freezes the running animation at its current position. clear:true also empties the pending queue.

µ(el, { stop: {} })                           // freeze, queue intact
µ(el, { stop: { clear: true } })              // freeze + clear queue
µ(el, { stop: { clear: true, fn: () => reset() } })

pause sync

Pauses a rAF tween mid-flight, saving the elapsed position. No effect on CSS-transition methods.

µ(el, { animate: { props: { width: 500 }, t: 2000 } })
setTimeout(() => µ(el, { pause:  {} }), 600)
setTimeout(() => µ(el, { resume: {} }), 1600)

resume sync

Resumes a paused rAF tween from exactly where it stopped. No-op if not paused.

µ(el, { resume: {} })

delay async

Inserts a timed pause into the queue. The next animation waits until this resolves.

µ(el, { fadeOut: { t: 300 } })
µ(el, { delay:   { t: 1000 } })
µ(el, { fadeIn:  { t: 300 } })

Utilities

DOM wrapping, position queries, and list helpers.

wrap sync

Wraps an element or NodeList inside shallow clones of a wrapper element.

const div = document.createElement('div')
div.className = 'box-wrap'
µ('/.box/', { wrap: div })

offset sync

Returns { top, left } relative to the document (scroll-aware).

const { top, left } = µ(el, { offset: null })
console.log(`top: ${top}px  left: ${left}px`)

pos sync

Returns { top, left } relative to the offset parent (offsetTop / offsetLeft).

const { top, left } = µ(el, { pos: null })

first / last sync

Returns the first or last item from an array or NodeList.

const items = document.querySelectorAll('.item')
const first = µ(items, { first: null })
const last  = µ(items, { last:  null })