HTMX - The Practical Guide

Master the basics of HTMX by installing and getting started, sending HTDP requests, handling responses, and using triggers and targets to build interactive projects.

Explore HTMX with a NodeJS Express demo that uses AJAX and returns HTML from the backend, and learn to run it with npm install and npm start in watch mode.

Install HTMX by CDN or manual hosting, load it via a public/htmx.js file, and use a click button to fetch and display data with HTMX in an Express app.

Use htmx with the hx-get attribute to load extra data on button click, returning an HTML fragment from a /info route in Express for HTMX to render.

Learn how to control response content rendering with htmx, replacing the triggering button with the returned list using outerHTML, and using map and join to fix comma issues.

Explore how HTMX works across any HTML code, regardless of generator or language. Learn when to blend it with vanilla JavaScript or lightweight libraries like Alpine.js for added interactivity.

Explore how HTMX uses hx-target with a css selector to render responses in any page element, and control placement with hx-swap, such as beforeend.

Learn how to use hx-trigger to control when HTMX sends requests, including hover or click events and combining multiple events with the control key.

Explore how to submit data with HTMX using hx-post on a form, triggering a post request while configuring routes like /note to handle server-side submissions.

Learn to submit data with HTMX by adding a post route in Express, using URL encoded middleware to parse form data, and update the HTMX knowledge array for re-render.

Learn how HTMX handles post requests by returning an updated HTML fragment and using hx-target and hx-swap outerHTML to replace the list, not the entire page.

Learn how HTMX handles post requests by returning a new HTML fragment and, using hx-select, extract a specific part from a redirected response to replace the list.

Practice htmx by submitting a form to update the course goals in an Express app. Implement a /goals post route using hx-post, hx-select, hx-target, and hx-swap.

Dive into advanced htmx concepts and attributes, including attribute inheritance, content selection and dom manipulation, event listening for htmx and external events, configuration options, and extensions.

Set up the exercise project by running npm install and npm start, then open localhost:3000 to practice adding and deleting list items and preserving state.

Send delete requests with hx-delete on a button to /goals/:idx, use Express delete route with splice to remove the item, and hx-target with hx-swap outerHTML to delete the list item.

Assign unique ids to each item and use them for deletion instead of indices, transforming items into objects with text and id and generating ids with date.getTime.

Explore how htmx inheritance lets you apply attributes to a parent element to reduce duplication, using hx-swap on the ul to propagate behavior to list items.

Learn to extract renderGoalListItem to render list items with id and text, reuse it across routes, and reduce code duplication in HTMX HTML fragments.

Learn to use hx-confirm in HTMX to prompt user confirmation before actions, and ensure that the request proceeds only after the user confirms.

Use HTMX hx-on to listen for events on elements and their children, specify the event after a colon, and execute JavaScript such as form.reset on submit to clear inputs.

Learn to listen to HTMX events with hx-on, including custom events like htmx:after-request, and use double colon notation and the this keyword to write concise event handlers.

Learn how HTMX uses the hx-disabled-elt attribute to disable a button during a request, preventing duplicate submissions and showing input clearing after the response with setTimeout.

Set up a new htmx project, run npm install and start the server, then click location items to post to /places with hx-post, adding items to the dream locations list.

See how htmx hx-vals attaches extra json values to an outgoing request body. Merge with form data or form the body, including location id, when no form exists.

Return a new list item by rendering it with the renderLocation function in the post route and append it to the interesting-locations list using hx-target and hx-swap beforeend.

Learn to manage two lists with htmx by dynamically switching item attributes on the server, using hx-post and hx-delete, confirming deletions, and swapping items between available and interesting locations.

Implement an out-of-band swap with HTMX to return multiple HTML fragments for different DOM targets, so adding or removing items updates available and interesting locations accordingly.

Update the delete response to enable an out of band swap by returning an empty body for the requester and providing an unordered list of available locations for swapping.

Explore how HTMX hx-swap and the show modifier control swapped content and scroll targets to the top, bottom, or a section after updates.

Replace the built-in confirmation with a custom modal in HTMX by adding a separate main.js and triggering it before add or delete requests.

Learn to update the UI without HTMX by inserting a confirmation modal with custom JavaScript, then show the modal and prevent the HTTP request until confirmation.

Leverage data-action attributes and the element dataset to dynamically replace modal text with add or remove, using event.detail.elt to drive showConfirmationModal in HTMX interactions.

Select the no button with document.getElementById, attach a click listener, and close the dialogue by removing it from the DOM. The example shows this approach before addressing the yes button.

Pause and resume HTMX requests using the htmx:confirm event and event.detail.issueRequest. Cancel or delay actions with a dialog while still completing the intended operation.

Leverage HTMX to add a suggested locations section above the dream locations that refreshes two random picks every five seconds. Integrate the getSuggestedLocations function into app.js and render updated suggestions.

Refresh the suggested locations every five seconds with HTMX hx-get on a list, implement a suggested-locations GET route, and return list items to update the UI.

Learn to implement polling in htmx by setting hx-trigger every 5 seconds to auto fetch updates, and swap only the unordered list's children via out-of-band updates.

Configure HTMX globally by setting the defaultSwapStyle, either in your main JS via htmx.config or in a meta tag. Learn how this impacts behavior and when to use each approach.

Configure HTMX extensions to extend functionality, add the debug extension by importing htmx-ext-debug.js, and activate it with the hx-ext attribute to observe events in the console.

Advance HTMX usage by exploring deeper control of requests and responses, including attaching or removing data, synchronizing multiple requests, and setting headers to influence front-end behavior and multi-response handling.

Explore a lean htmx starting project with a node express app, a login form with email and password, htmx attributes, and basic validation routes.

Explore how an authentication form uses htmx attributes to post to /login and validate inputs on change, update error messages, and diagnose why incorrect data prevents password validation.

Learn to filter outgoing post request data with hx-params, sending only the password value (and excluding email) to prevent unintended form data from every input.

Learn how to add extra headers to outgoing requests using hx-headers in HTMX, including simulating a CSRF token header like x-csrf-token in JSON-formatted headers.

Learn practical form validation with HTMX by validating inputs and the login form, displaying early error messages, and controlling swap areas like the extra-information div for seamless feedback.

Learn how HTMX's hx-sync attribute synchronizes requests by using a CSS selector to link them and applying a strategy like replace to cancel other requests, ensuring only one proceeds.

Explore how HTMX handles responses to requests, focusing on real redirects via the HX redirect header to trigger a client-side redirect to /authenticated after a successful login.

Explore how to retarget responses and reconfigure response handling in htmx by using headers like hx-retarget, hx-reswap, and hx-reselect to control swap targets and content insertion, and understand error handling.

Explore the HTMX response targets extension to handle different server responses by status, routing 422 validation errors and 500 server errors to dedicated targets with per-status swapping strategies.

Learn how HTMX can turn your site into a single page application by updating entire pages and handling navigations, using manual and automatic approaches with one simple important attribute.

Discover converting a multi-page app to a single-page experience with HTMX. Learn to navigate between product lists and details without full page reloads by replacing the DOM behind the scenes.

Use HTMX attributes to fetch and render entire pages in a single-page application-like flow by swapping the body with hx-get and hx-target, while updating the page title.

htmx updates the browser url with hx-push-url and saves the previous page snapshot, enabling back and forward navigation. Navigate to /products/ with a product id, delivering a true multi-page feel.

Learn how hx-boost enables a single-page app feel by turning all anchors into HTMX-controlled links, swapping bodies and updating the url automatically.

Explore hx-boost for anchors and forms, sending get or post requests to routes like /cart, updating the page with HTMX for a single-page experience, and handling redirects without URL changes on form submission.

Explore how HTMX delivers a single page application feel by rendering HTML on the backend, not a client-side single-page application, keeping users on the same page with instant updates.

Explore the htmx practical guide to reinforce core attributes, learn to send get, post, and delete requests, and replace page sections with backend responses, using events and dom utilities.