index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="booster-config" content='{ "basePath" : "/scripts/boosts/" }'>
    <link rel="stylesheet" href="/styles/styles.css" />
    <script defer src="https://cdn.jsdelivr.net/gh/bigskysoftware/htmx@1.9.9/src/htmx.min.js"></script>
    <script src="/main.js" type="module"></script>
  </head>
  <body hx-ext="booster">
    <header id="header">
      <nav
        hx-boost="true"
        hx-target="#main"
        hx-select="#main"
        hx-swap="outerHTML show:#header:top"
      >
        <a href="/">Home</a>
        <a href="/page2.html">Page 2</a>
        <a href="/page3.html">Page 3</a>
      </nav>
    </header>
    <main id="main" hx-history-elt>
      <h1>Home page</h1>
      <section>
        <header>
          <h2>Example htmx component: Celebrate</h2>
        </header>
        <div id="celebrate" data-booster="celebrate" data-options='{"message":"Hello, stranger!"}'></div>
      </section>
    </main>
  </body>
</html>