Get Started with Domma

Choose your architecture: Multi-Page for content sites, or Single-Page for app-like experiences. Up and running in 30 seconds.

30 Second Setup Zero Dependencies 16+ Themes
QuickStart: SPA → QuickStart: MPA →
$ npm init -y
$ npm install domma-js
$ npx domma init --spa | --mpa

Choose Multi-Page (MPA) or Single Page (SPA) mode!

How It Works

1

Initialise Your Project

$ mkdir my-app && cd my-app
$ npm init -y

What happens: Creates a new project folder and package.json

2

Install Domma

$ npm install domma-js

What happens: Downloads Domma from npm (~260KB minified)

3

Generate Your Site ⚡ Ready!

$ npx domma init

What happens: Interactive prompt lets you choose Multi-Page (MPA) or Single Page (SPA) mode!

New in v0.11.0: Choose your architecture!
npx domma init --mpa - Multi-Page Application (traditional)
npx domma init --spa - Single Page Application (client-side routing)

✓ Multi-Page Application (MPA):

index.html
about/index.html
contact/index.html
blog/index.html
docs/index.html
  • Traditional multi-page site
  • 5 separate HTML pages
  • Works on any web server
  • No JavaScript required
  • SEO-friendly by default

✓ Single Page Application (SPA):

index.html (single entry)
js/views/home.js
js/views/about.js
js/views/contact.js
js/app.js (router)
  • Client-side routing (hash-based)
  • Instant view transitions
  • No page reloads
  • Built-in Router (R alias)
  • Lifecycle hooks & middleware
Both modes include: Navbar, Footer, 16+ Themes, Icons, Grid, Components, Mobile Responsive

Choose Your Architecture

Both modes include Navbar, Footer, 16+ Themes, Icons, Grid, Components, and Mobile Responsive design

Single Page Application

App-like experience with client-side routing

$ npx domma init --spa

Perfect For:

  • App-like experiences (dashboards, tools)
  • Instant page transitions
  • Client-side routing
  • Shared state between views
  • Dynamic, interactive UI
Get Started with SPA

Multi-Page Application

Traditional site with separate HTML pages

$ npx domma init --mpa

Perfect For:

  • Content-heavy sites (blogs, docs, marketing)
  • SEO is critical
  • Works without JavaScript
  • Simple static hosting
  • Independent pages
Get Started with MPA
Not sure which to choose? Start with SPA — it's the modern approach with instant transitions. Choose MPA for content-heavy sites where SEO is critical.

You're Done! 🎉

Open index.html (MPA) or frontend/index.html (SPA) in your browser to see your new site.

Everything is ready to use - navbar, footer, theming, grid, components.
Customise via domma.config.json or dive into the code.

Read the Docs View on GitHub

Just Want to Try It?

Skip npm and use Domma from a CDN - single HTML file, no build tools.

Copy-Paste Ready:

<!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>
    $(() => {
      // Use Domma Config for declarative setup
      $.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>

Note: For production, use the npm workflow above for better performance and bundle optimisation.