Showcase

Every Domma module, live - demos with their code, one page per module. Right-click any demo to copy its HTML or JavaScript, reset it, or open it on its own.

Core

DOM

jQuery-compatible DOM manipulation: 90+ chainable methods, events and effects.

  • 90+ methods
  • Traversal & manipulation
  • Events & animations
  • CSS & attributes
$('.selector').addClass('active')

Utils

120+ Lodash-compatible utilities for arrays, objects, strings and functions.

  • 120+ utilities
  • Array & collection methods
  • Object manipulation
  • String & function helpers
_.groupBy(users, 'role')

Config

Declarative setup: wire components, events and state from one object.

  • JSON-based setup
  • Auto component init
  • Runtime updates
  • Lifecycle management
$.setup({ '#modal': { component: 'modal' } })

Storage

localStorage with automatic JSON, namespaced keys and graceful fallbacks.

  • Auto JSON serialisation
  • Prefixed keys
  • Model persistence
  • Graceful fallbacks
S.set('user', { name: 'Alice' })

HTTP

A promise-based HTTP client with JSON handling, interceptors and retries.

Router

Hash-based client-side routing with views, lifecycle hooks and middleware.

  • Hash-based routing (#/path)
  • Dynamic route parameters
  • View lifecycle hooks
  • External template files
R.navigate('/user/:id')

Integrations

Domma alongside other libraries and frameworks.

Components

Reusable units of UI with their own state, template and teardown.

Reference

The whole API on one page: a cheat sheet for every namespace.

Data

Dates

Moment-style dates: parse, format, compare and calculate.

  • Chainable API
  • Formatting & parsing
  • Relative time (fromNow)
  • Comparison & diff
D().add(7, 'days').format('MMM D')

Models

Reactive models with validation, computed values, effects and DOM bindings.

  • Pub/Sub events
  • Reactive data binding
  • Blueprint validation
  • Two-way DOM binding
M.bind(model, 'name', '#input')

Forms

Forms generated from a blueprint, with validation, wizards and CRUD.

  • Blueprint-driven generation
  • Automatic validation
  • Modal & wizard support
  • Complete CRUD helper
Domma.forms.create(blueprint, data, options)

Tables

Data tables with sorting, filtering, pagination and export.

  • Sorting & filtering
  • Pagination
  • Row selection
  • CSV/JSON export
Domma.tables.create('#grid', opts)

Blueprints

Unified schema system - define once, use everywhere for validation, forms, models, and CRUD.

  • Single source of truth
  • Form generation
  • Model validation
  • Blueprint composition
M.create(blueprint) → Domma.forms.create(blueprint)

Reactivity

Dependency tracking - a write re-runs exactly the work that depends on it. Also published on its own as domma-reactive.

  • Observables and computed values
  • Effects, batched onto one flush
  • Usable without Domma
M.computed(() => price.value * qty.value)

Bindings

Declarative bindings between markup and data, in a component template or on a page you already have.

  • data-bind-*, data-model,
  • data-on-*
  • Keyed lists that keep their DOM
  • CSP-safe - no eval
M.applyBindings(model, '#app')

Dot notation

Read and write nested model fields with dot paths: user.address.city.

UI

Elements

Thirty UI components - modals, tabs, popovers, sortable lists and more.

  • Modals & tooltips
  • Tabs & accordions
  • Cards with effects
  • Config integration
Domma.elements.modal('#dialog')

Icons

200+ SVG icons in 15 categories, from a data-icon attribute.

  • 100+ icons in 8 categories
  • Render, inject, or scan
  • Size & colour options
  • Custom icon registration
Domma.icons.render('search')

Flags

Nation flags as inline SVG, by country code.

  • 50+ flags across 5 regions
  • Rect, rounded, square & circle
  • Render, inject, or scan
  • Custom flag registration
FL.render('gb', { shape: 'circle' })

Themes

14 themes, each light and dark, switched live.

  • Light & dark themes
  • Ocean, forest, sunset variants
  • CSS-only or JS API
  • System preference detection
Domma.theme.set('dark')

Effects

Typewriter, reveal, ripple, confetti and more, with reduced-motion respected.

  • Glow effects
  • Fireworks animations
  • Shadow utilities
  • Pure CSS implementation
class="glow-primary firework-on-hover"

Grid

12-column flexbox grid with mobile-first stacking, plus CSS Grid utilities.

Opacity & Translucency

Full opacity scale plus semantic translucency classes and a frosted glass variant.

  • 13-step opacity scale (0-100)
  • Semantic translucent utilities
  • Frosted glass effect
  • Hover variants with transitions
class="translucent-glass"

Accessibility & Text

Screen-reader-only text, skip links, line clamping, whole-card links and a divider with a word in it.

  • .sr-only / .visually-hidden and .skip-link
  • .line-clamp-1 to -5
  • .stretched-link
  • .divider-text
class="sr-only"

Sidebar

JSON-configured navigation sidebar: unlimited nesting, mobile drawer, theme variants.

Footer

Responsive footer in three layouts - simple, columns, minimal - with theme variants.

Tools

Theme Roller

Design a theme visually and export it.

Page Roller

Build a page from components, visually.

Editor

A rich-text editor with export.

Print PDF

Print and PDF export for any part of a page.

Schema Builder

Build blueprints visually: drag-and-drop fields, test validation, export JS, JSON or TypeScript.