Documentation

Monarch is an original Bootstrap 5 HTML administration template. It includes 148 editable HTML pages, local third-party assets, and a small source generator for consistent development.

Use the ready-to-edit HTML

Open dist/index.html , or serve the dist folder with any static web server. No framework, bundler, or production build is required to use the HTML pages. An HTTP server is recommended for consistent browser storage, exports, maps, and plugin behavior.

Work from source

Install Node.js 20 or newer. From the package root, run:

npm ci
npm run build
npm start

The local preview is available at http://127.0.0.1:4173 . Use npm run check for static route, asset, and JavaScript checks. Use npm run package to create a distributable archive.

dist/                         Ready-to-edit HTML distribution
  index.html                  Workspace overview
  dashboard-*.html            Dashboard variants
  assets/css/theme.css        Shared visual tokens and styles
  assets/js/app.js             Theme and application behavior
  assets/js/preferences.js     Early appearance setup
  assets/js/catalog.js         Searchable page catalog
  assets/vendor/               Local third-party assets
  assets/licenses/             Original dependency notices
src/
  core.mjs                    Page catalog and HTML helpers
  layout.mjs                  Shared header, navigation, footer
  pages/                      Page families and examples
  assets/                     Theme styles and browser modules
scripts/
  build.mjs                   Generate HTML and copy assets
  serve.mjs                   Static preview server
  check.mjs                   Static integrity checks
  package.mjs                 Release packaging
package.json / package-lock.json

The files in dist are ordinary, complete HTML documents. All page routes end in .html . CSS, JavaScript, fonts, images, and licensing files keep their standard extensions.

Edit src/layout.mjs to change the header, sidebar, search dialog, theme wizard, or footer across every screen. The page catalog in src/core.mjs defines filenames, titles, page types, and navigation groups.

1. Add a catalog entry with a unique filename, title, and type.
2. Create the page markup in the appropriate module under src/pages .
3. Register a new renderer in the build script only if you introduce a new page family.
4. Add page-specific plugin assets in src/dependencies.mjs .
5. Run the build and integrity check.

For direct HTML editing, duplicate starter.html and modify the main content. Direct edits in dist will be replaced by a later source build. Choose one approach and keep a backup of your changes.

Change the CSS variables at the top of theme.css to update the accent, brand color, surfaces, text, border, and radius. Dark-mode overrides follow the main component definitions.

:root {
  --accent: #b9ed77;
  --brand: #306b42;
  --sidebar: #152923;
  --bg: #f5f7f6;
  --surface: #ffffff;
}

The appearance panel supports light, dark, system mode, three accents, vertical/compact/horizontal navigation, sidebar and header surfaces, and two density settings. Preferences use the monarch:preferences localStorage key. The early preferences script prevents an unnecessary flash of the default theme.

Bootstrap and Remix Icon are shared. Other libraries load only on the pages that demonstrate or use them. jQuery is loaded before Select2 and DataTables. Do not load the same plugin twice.

Each plugin has a working example in the navigation. See the credits page for exact versions and licenses. Chart data is fictional and lives in the browser modules. Replace the sample series with your own API response.

Google Maps loads only after a key is entered. The key is not persisted. Configure the API in Google Cloud and restrict it to your deployment origin. Leaflet tiles require internet access. The vector map is fully local.

This is a front-end theme, not a backend application. Browser storage is used to demonstrate interactions on one device.

Never store real passwords, payment details, access tokens, or confidential customer information in these demo stores. Authentication fields are not persisted. Replace demo handlers rather than relying on them as security boundaries.

Use semantic headings, field labels, descriptive links, and accessible names for icon buttons. Bootstrap handles the focus behavior of dialogs and drawers. The kanban includes a stage selector as an alternative to dragging. Animation respects the reduced-motion preference.

Layouts use Bootstrap breakpoints with theme refinements at 767, 991, 1200, and 1500 pixels. Tables and boards scroll within their containers. Validate the final content with keyboard navigation, screen readers, zoom, and your supported browser/device matrix.

1. Replace sample companies, copy, pricing, policies, and contact details.
2. Connect your backend and remove demo-only handlers where appropriate.
3. Review the original notices in assets/licenses and retain all required attribution.
4. Review dependency updates and their license changes before upgrading.
5. Run the build and static checks, then perform browser, accessibility, and integration QA.
6. Create product screenshots, support terms, and your chosen distribution license.
7. Package the source, HTML distribution, and documentation.

Marketplace acceptance is not guaranteed. Product licensing, seller details, and a completed production QA pass belong to the publisher. This delivery includes the technical structure and documentation, not a submitted marketplace listing.

Unstyled page or missing icons

Keep the assets folder beside the HTML files. Verify that local paths are preserved when moving the distribution.

Changes disappear after rebuilding

The generator owns dist. Make durable edits in src, or use direct HTML editing without rebuilding.

Map does not load

For Google Maps, verify the key, API access, origin restrictions, and account setup. For Leaflet, check internet access. The vector map works without external requests.

Browser storage unavailable

Private or restricted browser modes may prevent persistence. The interface shows a notice and continues where possible. Use a local HTTP server for a consistent preview.

Support scope

Document your own support channel, response times, and customization policy before distributing this template.

The included checker verifies page entrypoints, nonempty main content, local links and assets, unique IDs, English document language, and source JavaScript syntax. It does not certify visual rendering, third-party service availability, accessibility conformance, or backend functionality.

See validation-report.json in the package root for the results from the most recent static check.