Get started with Domma

Single-page for app-like experiences, multi-page for content sites. Up and running in about 30 seconds.

30-second setup Zero dependencies 14 themes, light and dark

QuickStart: SPA QuickStart: MPA

How it works

1
1
Create a project
mkdir my-app
cd my-app
npm init -y

A new folder with a package.json.

2
2
Install Domma
npm install domma-js

Downloads Domma from npm - about 175 KB gzipped.

3
3
Generate your site
npx domma-js init

Asks whether you want a single-page (the default) or multi-page site, then writes it.

Skip the question with npx domma-js init --spa or npx domma-js init --mpa.

Choose your architecture

Both include a navbar, footer, 14 themes with light and dark variants, icons, the grid, every component, and a mobile layout.

Single-page application

App-like, with client-side routing.

npx domma-js init --spa

Ideal for:

  • app-like experiences (dashboards, tools)
  • instant view changes with no page reloads
  • state shared between views
  • dynamic, interactive interfaces

Uses the built-in router (R), with lifecycle hooks and middleware.

Get started with SPA

Multi-page application

A traditional site of separate HTML pages.

npx domma-js init --mpa

Ideal for:

  • content sites (blogs, docs, marketing)
  • when search engines matter most
  • pages that work without JavaScript
  • simple static hosting

Starts with home, about, contact, blog and docs pages, plus privacy, cookies and terms.

Get started with MPA

Not sure? Start with SPA - it's the modern approach. Choose MPA for content-heavy sites where search ranking matters most.

You're done

Your project is in frontend/. Open frontend/pages/index.html, or serve the folder (for example npx http-server) and visit /frontend/pages/. Everything is ready: navbar, footer, theming, grid and components. Customise it in domma.config.json, or dive into the code.

Explore the Showcase View on GitHub

Just want to try it?

Skip npm and use Domma from a CDN - one HTML file, no build tools:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/domma.css">
  <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/elements.css">
</head>
<body class="dm-theme-charcoal-dark">
  <nav id="nav"></nav>
  <main class="container py-6">
    <h1>Hello Domma!</h1>
    <button class="btn btn-primary" id="toast-btn">Click me</button>
  </main>

  <script src="https://unpkg.com/domma-js/public/dist/domma.min.js"></script>
  <script>
    $(() => {
      // Declarative setup with Domma's config engine
      $.setup({
        'body': {
          component: 'theme',
          options: { theme: 'charcoal-dark', persist: true }
        },
        '#nav': {
          component: 'navbar',
          options: {
            brand: { text: 'My App' },
            items: [{ text: 'Home', url: '/' }]
          }
        },
        '#toast-btn': {
          events: {
            click: () => {
              Domma.elements.toast.success('Hello! 🎉', {
                position: 'top-center',
                duration: 3000
              });
            }
          }
        }
      });
    });
  </script>
</body>
</html>

For production, use the npm workflow above.