HTMX Snippet Library
A curated library of common HTMX patterns and snippets ready to copy into your project. Browse categories like forms, search, modals, pagination, and infinite scroll. Each snippet includes working HTML code, a description of what it does, and an explanation of the HTMX attributes used. Perfect for learning HTMX or quickly adding interactivity to your web pages.
Basic GET Request
Fetch data from the server and inject it into a target element.
<button hx-get="/api/data" hx-target="#result" hx-swap="innerHTML">Load</button>Uses hx-get to make a GET request when clicked. The response HTML replaces the inner content of the element with id "result".
POST Form
Submit a form via AJAX and replace the result area with the server response.
<form hx-post="/api/submit" hx-target="#result" hx-swap="outerHTML">
<input type="text" name="username" placeholder="Username" />
<button type="submit">Submit</button>
</form>Uses hx-post to submit the form data as a POST request. The entire target element is replaced with the response via outerHTML swap.
Delete with Confirm
Delete a resource with a browser confirmation dialog before sending the request.
<button hx-delete="/api/item/1" hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">Delete</button>Uses hx-confirm to show a native confirm dialog. If confirmed, sends a DELETE request and removes the closest table row with a 1-second swap delay for animation.
Search with Debounce
Live search input that waits for the user to stop typing before sending a request.
<input type="search" name="q" hx-get="/api/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">The hx-trigger uses keyup with a 500ms delay to debounce requests. Only fires when the value has actually changed, reducing unnecessary server calls.
Infinite Scroll
Automatically load more content when the user scrolls to the bottom of the page.
<div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend">Loading...</div>The "revealed" trigger fires when the element scrolls into the viewport. The response is inserted after the element, and the server returns the next sentinel element for continuous loading.
Click to Load More
Append additional items to a list when a button is clicked.
<button hx-get="/api/items?page=2" hx-target="#item-list" hx-swap="beforeend" hx-select="li">Load More</button>Uses beforeend swap to append new items to the list. The hx-select attribute picks only the li elements from the response, filtering out any wrapper markup.
Active Search
Real-time search with a loading indicator and support for the search event.
<input hx-get="/api/search" hx-trigger="keyup changed delay:300ms, search" hx-target="#search-results" hx-indicator="#spinner">Combines keyup with delay for debounced live search and the "search" event for when the user clears the input. The hx-indicator shows a spinner element during the request.
Modal Dialog
Load modal content from the server and inject it into a container.
<button hx-get="/api/modal" hx-target="#modal-container" hx-swap="innerHTML" hx-trigger="click">Open Modal</button>Fetches the modal HTML from the server on click and places it inside the modal container. The server returns the full modal markup including backdrop and content.
Inline Edit
Click on text to replace it with an editable form fetched from the server.
<span hx-get="/api/edit/1" hx-trigger="click" hx-swap="outerHTML">Click to edit</span>When clicked, the span is replaced with an edit form from the server. The form typically includes hx-put or hx-post to save changes and swap back to the display view.
Polling
Automatically refresh content at a regular interval by polling the server.
<div hx-get="/api/status" hx-trigger="every 2s" hx-swap="innerHTML">Loading status...</div>The "every 2s" trigger polls the server every 2 seconds. Useful for dashboards, status pages, or any content that needs regular updates without WebSockets.
Tabs
Load tab content dynamically from the server when a tab is clicked.
<div hx-get="/api/tab/1" hx-trigger="click" hx-target="#tab-content" hx-swap="innerHTML" class="tab active">Tab 1</div>Each tab fetches its content from a different endpoint on click. The hx-target points to a shared content area, and the server returns only the content fragment for that tab.
Form Validation
Validate individual form fields on the server as the user fills them in.
<input name="email" hx-post="/api/validate/email" hx-trigger="change" hx-target="next .error" hx-swap="innerHTML">Triggers validation on the change event and targets the next sibling with class "error" to display validation messages. This provides real-time field-level feedback.
Sortable Table
Click on table headers to sort the table data via a server request.
<th hx-get="/api/items?sort=name" hx-target="#table-body" hx-swap="innerHTML">Name ↕</th>Each table header triggers a GET request with the sort parameter. The server returns the sorted rows which replace the table body content.
Cascading Selects
Dynamically populate a dependent dropdown based on the selection of another.
<select name="country" hx-get="/api/states" hx-target="#state-select" hx-swap="innerHTML" hx-include="this">
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>When the country select changes, it sends its value via hx-include and fetches the corresponding states. The response replaces the options inside the dependent select element.
How to Use
- 1
Browse Categories
Filter snippets by category: Forms, Lists, Navigation, Modals, Search, Pagination, and more.
- 2
Search Snippets
Use the search bar to find snippets by name or description.
- 3
Copy and Use
Read the explanation, then copy the HTML snippet directly into your project. Customize URLs and targets as needed.
Examples by Niche
Input with hx-get, hx-trigger="keyup changed delay:300ms" for debounced search results
Div with hx-get and hx-trigger="revealed" to load more content when scrolled into view
Span with hx-get on click to swap static text with an edit form
Frequently Asked Questions
What is HTMX?
HTMX is a lightweight JavaScript library that lets you add AJAX, WebSockets, and Server-Sent Events directly in HTML using attributes. It enables dynamic web pages without writing JavaScript.
Do I need a specific backend to use HTMX?
No, HTMX works with any backend that can serve HTML. It is commonly used with Python (Flask, Django), Go, Ruby on Rails, PHP, and Node.js.
How do I install HTMX?
Add a single script tag to your HTML: <script src="https://unpkg.com/htmx.org"></script>. No build step or npm install required.
How is HTMX different from React or Vue?
HTMX extends HTML with attributes for AJAX and dynamic behavior, keeping logic on the server. React and Vue are JavaScript frameworks that run in the browser and manage a virtual DOM. HTMX is ideal for server-rendered applications that need interactivity without a full SPA architecture, resulting in less JavaScript and simpler deployments.
Related Tools
AI Token Counter
Estimate token counts and API costs for GPT-4, Claude, and other AI models.
Regex Tester
Test regular expressions in real-time with match highlighting and capture group details.
Diff Checker
Compare two texts side by side and highlight added, removed, and unchanged lines.
HTML to Image
Render HTML and CSS code as a downloadable PNG image in your browser.
Timestamp Converter
Convert Unix timestamps to human-readable dates and vice versa with timezone support.
Cron Expression Generator
Build cron expressions visually with human-readable explanations and common presets.