Quick start

This page builds a minimal page in three layers. Each layer works on its own; add the next only when you need it.

1. Styles only

Load the stylesheet and use the semantic classes. No JavaScript — buttons, inputs, cards, and the rest render from CSS alone.

<link rel="stylesheet" href="/assets/hc/hc.css">

<button class="hc-button" data-variant="primary">Save</button>
<input class="hc-input" type="text" placeholder="Search…">

data-variant and data-size are styling hooks read by the CSS — they work without any JavaScript.

2. Add behaviors

Load the behaviors bundle to light up the interactive components (menus, dialogs, toasts, …). Here, firing an hc:toast event now shows a toast:

<link rel="stylesheet" href="/assets/hc/hc.css">
<script type="module" src="/assets/hc/hc.behaviors.min.js"></script>

<button class="hc-button"
        onclick="document.body.dispatchEvent(new CustomEvent('hc:toast', { bubbles: true, detail: { message: 'Saved' } }))">
  Save
</button>

The bundle installs every behavior and creates a toast region for you. To install only the behaviors you use, see Installation → Behaviors.

3. Add htmx

Load htmx to send the request. htmx is a single script — <script defer src="https://unpkg.com/htmx.org@2"></script> from a CDN, or copy it into your assets; see htmx’s install docs for the pinned-version + integrity form. data-hx-* attributes are read by htmx — not by HC; HC only styles the button. Clicking Add item posts to /items; the server returns one <li>, which htmx appends to the list:

<link rel="stylesheet" href="/assets/hc/hc.css">
<script defer src="/assets/htmx.min.js"></script>
<script type="module" src="/assets/hc/hc.behaviors.min.js"></script>

<button class="hc-button" data-variant="primary"
        data-hx-post="/items"
        data-hx-target="#items"
        data-hx-swap="beforeend">
  Add item
</button>
<ul id="items"></ul>

The Plain HTML guide has the same shape as a complete, runnable page (with a static server and a toast region).

Try it in one file

No server, no install. Save this as index.html and open it in a browser — the CSS and behaviors load from the CDN (see Installation → CDN):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hypermedia Components</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hypermedia-components/core/dist/hc.min.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/@hypermedia-components/core/dist/hc.behaviors.min.js"></script>
  </head>
  <body style="padding: 2rem;">
    <div class="hc-stack" style="--hc-stack-gap: 1rem; max-inline-size: 24rem;">
      <button class="hc-button" data-variant="primary"
              onclick="document.body.dispatchEvent(new CustomEvent('hc:toast', { bubbles: true, detail: { message: 'Saved' } }))">
        Save
      </button>
      <label class="hc-switch-label">
        <input class="hc-switch" type="checkbox" role="switch" checked>
        Email notifications
      </label>
    </div>
  </body>
</html>

The button fires a toast (a behavior; the bundle creates the toast region for you), the switch renders from CSS alone — the whole kit working from two CDN files.

Next steps

Components — browse the full set with live examples.
Recipes — htmx patterns (confirm, live search, toasts…).
Integrations — Django, Rails, Go, Razor, and more.