index.html
Ready
localhost:5173
HTMX 2ReadyHTMLLn 1, Col 1
HTMX 2 playground with local project files, npm-style imports, editable HTML response partials, real request and swap behavior, and live browser preview.
HTMX 2 playground with local project files, npm-style imports, editable HTML response partials, real request and swap behavior, and live browser preview.
Runtime: v2.0.10
HTMX performs real requests and swaps in the browser preview. Editable files under public/ provide the local responses; connect the downloaded project to your own backend when you need dynamic, server-generated HTML.
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
<!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>
import htmx from 'htmx.org'
import './styles.css'
const requestMessage = document.querySelector('#request-message')
htmx.on('htmx:beforeRequest', () => {
if (requestMessage) requestMessage.textContent = 'Requesting HTML partial…'
})
htmx.on('htmx:afterSwap', (event) => {
if (requestMessage) {
const target = event.detail.target
requestMessage.textContent = `Swapped response into #${target.id}`
}
})
htmx.on('htmx:responseError', (event) => {
if (requestMessage) {
requestMessage.textContent = `Request failed with status ${event.detail.xhr.status}`
}
})