Installation

Installing Mod in a Plain HTML App

How to install Mod for use in a Plain HTML app.

Requires a Web Server

Despite being plain HTML, keep in mind that this approach will still require you to have a simple web server to host the HTMl and static files.

To use Mod with Plain HTML, you will want to decide how you want Mod's files loaded in your app. There are two options:

Global

This will load Mod's CSS and JavaScript globally in your app for all pages.

Global CSS and ESM JavaScript

This will load Mod's CSS globally and set up your JavaScript to load via ESM. This is the recommended approach for plain HTML sites.

Using Global CSS and JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light-plus.min.css) below.

Type	File in mod(-plus).zip	Target path in app	What is it?
File	mod-light(-plus).min.css	public/mod-light(-plus).min.css	The light-themed version of Mod.
File	mod-dark(-plus).min.css	public/mod-dark(-plus).min.css	The dark-themed version of Mod.
File	mod(-plus).iife.min.js	public/mod(-plus).iife.min.js	The IIFE version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript globally in your app.
File	fonts/lucide.woff2	public/fonts/lucide.woff2	The icon font used by Mod, Lucide.
File	fonts/mod-brand-icons.woff2	public/fonts/mod-brand-icons.woff2	The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, you'll want to update your index.html file to include Mod's imports, your component's HTML, and any JavaScript calls:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/mod(-plus)-(light|dark).min.css">
  <script src="/mod(-plus).iife.min.js"></script>
</head>
<body data-mod-theme="light">
  <div class="mod-command-palette">
    <!-- HTML for Mod's command palette component... -->
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      if (window.mod) {
        window.mod.command_palette();
      }
    });
  </script>
</body>
</html>

Above, we begin by including Mod's font, Inter, via a Google CDN link (optional and can be replaced with static assets in the app).

Next, depending on the theme we want to use (light or dark), we load Mod's CSS file.

After this, we load Mod's JavaScript file (here, using the IIFE variant to enable global JavaScript).

On our <body> tag, we set the data-mod-theme attribute to the theme we want to use (this value should match the name of the CSS file that you included in the <head>, e.g., light or dark).

Inside of our <body> tag, we add a <script> tag that adds an event listener for the DOMContentLoaded event on our document, and inside, if window.mod is defined, make a call to window.mod.command_palette(); to attach interactivity to the command palette component in our page.

Using Global CSS and ESM JavaScript