Frequently Asked Questions

Answers to common questions about Domma.

Getting started

Domma (Dynamic Object Manipulation & Modeling API) is a lightweight, zero-dependency JavaScript framework. It combines jQuery-style DOM manipulation, Lodash-style utilities, Moment-style dates, reactive models and a full set of UI components in one bundle - about 175 KB gzipped.

Include the script tag in your page:

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

That's it - no build step is needed. It is also on npm (npm install domma-js), and npx domma-js init scaffolds a new project. See the QuickStart.

No. Domma is self-contained with no external dependencies. Everything you need is in a single file.

Features and compatibility

Yes. Domma's JavaScript works independently of its CSS. Switch Domma's theming off entirely with $.setup({ noStyles: true }) and use Bootstrap, Tailwind or your own styles.

Domma uses the same $() syntax as jQuery, so if you know jQuery you'll feel at home. It is not a drop-in replacement, though - it's a separate library with its own implementation.

All modern browsers, including Chrome, Firefox, Safari and Edge. It uses standard ES2015+ features and the Fetch API.

Yes. Domma ships as both UMD and ESM bundles, so you can import just what you need:

import { Domma, utils, dates } from './domma.esm.js';

Usage and good practice

Domma provides short aliases for the things you reach for most:

  • $ - DOM manipulation (like jQuery)
  • _ - utility functions (like Lodash)
  • D() - dates (like Moment.js)
  • M - reactive models
  • S - storage
  • H - HTTP
  • E - UI elements

The full list is in the reference.

Domma uses a jQuery-style event system:

$('.button').on('click', (e) => {
    console.log('Clicked!');
});

// Event delegation $('.container').on('click', '.item', (e) => { console.log('Item clicked'); });

Domma's models are reactive data objects with validation and DOM binding:

const user = M.create({
    name: { type: M.types.string, required: true },
    age: { type: M.types.number }
});

M.bind(user, 'name', '#name-input', { twoWay: true }); user.onChange('name', (val) => console.log(val));

For markup that already exists, M.applyBindings() wires data-bind-*, data-model and data-on-* attributes straight to your data. See Models.

Support

The Showcase has a live example of every feature with its code, and the QuickStart walks you through your first project.

Open an issue on GitHub with as much detail as you can: browser version, a code sample, and what you expected against what happened.