Domma

Dynamic Object Manipulation & Modeling API

A lightweight, zero-dependency JavaScript framework combining jQuery-style DOM manipulation, Lodash utilities, and modern components.

Zero Dependencies ~255KB Bundled ES Modules Chainable API

Namespaces

Everything you need to build modern web applications

Config

Declarative configuration engine for component initialisation.

  • JSON-based setup
  • Auto component init
  • Runtime updates
  • Lifecycle management

DOM

jQuery-compatible DOM manipulation with a chainable API.

  • 90+ methods
  • Traversal & manipulation
  • Events & animations
  • CSS & attributes

Utils

Lodash-compatible utility functions for common operations.

  • 120+ utilities
  • Array & collection methods
  • Object manipulation
  • String & function helpers

Dates

Moment.js-style chainable date manipulation.

  • Chainable API
  • Formatting & parsing
  • Relative time (fromNow)
  • Comparison & diff

Models

Reactive data models with pub/sub events and validation.

  • Pub/Sub events
  • Reactive data binding
  • Schema validation
  • Two-way DOM binding

Elements

Ready-to-use UI components with JavaScript interactivity.

  • Modals & tooltips
  • Tabs & accordions
  • Cards with effects
  • Config integration

Tables

DataTable-like functionality for interactive data grids.

  • Sorting & filtering
  • Pagination
  • Row selection
  • CSV/JSON export

Storage

localStorage wrapper with auto-serialisation and model persistence.

  • Auto JSON serialisation
  • Prefixed keys
  • Model persistence
  • Graceful fallbacks

Icons

Comprehensive SVG icon library with 100+ icons.

  • 100+ icons in 8 categories
  • Render, inject, or scan
  • Size & colour options
  • Custom icon registration

Themes

Complete theming system with light/dark modes and colour variants.

  • Light & dark themes
  • Ocean, forest, sunset variants
  • CSS-only or JS API
  • System preference detection

Quick Start

Get up and running in seconds

1. Include Domma

<script src="dist/domma.min.js">

2. Use the short aliases

// DOM manipulation (jQuery-style)
$('.btn').on('click', () => alert('Clicked!'));

// Utilities (Lodash-style)
const grouped = _.groupBy(users, 'department');

// Dates (Moment-style)
const nextWeek = D().add(7, 'days').format('YYYY-MM-DD');

// Models (Reactive with persistence)
const user = M.create({ name: { type: 'string' } }, {}, { persist: 'user' });
M.bind(user, 'name', '#name-input', { twoWay: true });

// Storage (localStorage)
S.set('prefs', { theme: 'dark' });
S.get('prefs');  // { theme: 'dark' }

3. Or use the config engine for declarative setup

$.setup({
    '.card': {
        component: 'card',
        options: { hover: true }
    },
    '#submit': {
        events: {
            click: (e, $el) => $el.text('Submitted!')
        }
    }
});

Why Domma?

0

Zero Dependencies

No external libraries required. Everything is self-contained.

$

Familiar APIs

jQuery, Lodash, and Moment patterns you already know.

ES

Modern JavaScript

ES modules, tree-shakeable, works with bundlers.