index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMX Playground</title>
</head>
<body>
<main class="shell">
<header class="hero">
<p class="eyebrow">HTMX project</p>
<h1>Build a dynamic interface in your HTML.</h1>
<p class="intro">
These controls make real HTMX requests. Their responses are editable
HTML partials that work here and in the downloaded Vite project.
</p>
</header>
<section class="workspace" aria-labelledby="workspace-title">
<div class="workspace-heading">
<div>
<p class="eyebrow">Project workspace</p>
<h2 id="workspace-title">Latest activity</h2>
</div>
<button
class="button button-primary"
hx-get="/partials/activity.html"
hx-target="#activity"
hx-swap="innerHTML"
hx-indicator="#activity-spinner"
>
Refresh activity
</button>
</div>
<div class="request-status" aria-live="polite">
<span id="activity-spinner" class="htmx-indicator spinner" aria-hidden="true"></span>
<span id="request-message">Ready for a request</span>
</div>
<div id="activity" class="activity-grid">
<article class="activity-card">
<span class="status-dot status-purple"></span>
<div>
<strong>Playground created</strong>
<p>Edit a partial, then request it again.</p>
</div>
<time>Now</time>
</article>
</div>
</section>
<section class="workspace" aria-labelledby="checklist-title">
<div class="workspace-heading">
<div>
<p class="eyebrow">Progressive enhancement</p>
<h2 id="checklist-title">Launch checklist</h2>
</div>
</div>
<div id="checklist">
<button
class="button button-secondary"
hx-get="/partials/checklist.html"
hx-target="#checklist"
hx-swap="outerHTML"
hx-indicator="#checklist-spinner"
>
Load checklist
<span id="checklist-spinner" class="htmx-indicator spinner" aria-hidden="true"></span>
</button>
</div>
</section>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>