HTMX: Building Dynamic Front-Ends Without JavaScript

2025-02-27

Introduction to HTMX

This chapter introduces HTMX, a lightweight JavaScript library that empowers developers to create dynamic web front-ends using HTML attributes, eliminating the need for extensive JavaScript coding. HTMX allows you to add interactivity to your web pages by leveraging special HTML attributes known as hyperscript attributes. These attributes enable you to perform HTTP requests and manipulate the DOM directly from your HTML.

Core Concept: Hyperscript Attributes

HTMX operates through the use of custom HTML attributes that extend the functionality of standard HTML elements. These attributes, prefixed with hx-, allow you to define various interactive behaviors directly within your HTML markup.

For example, consider the following button code snippet:

<button hx-post="/endpoint">Click Me</button>

This button, when clicked, will initiate a POST request to the /endpoint URL, demonstrating how HTMX attributes can trigger HTTP requests.

Addressing Limitations of Traditional HTML

Historically, HTML forms were limited to GET and POST methods for submitting data to servers. HTMX overcomes this constraint by enabling the use of other HTTP methods such as PUT, PATCH, and DELETE.

HTTP Methods: These are verbs that indicate the desired action to be performed on a resource identified by a URL. Common HTTP methods include GET (retrieve data), POST (create new data), PUT (update existing data), PATCH (partially update existing data), and DELETE (remove data).

This expanded range of HTTP methods allows for more RESTful and semantically correct web applications. Furthermore, HTMX extends the capability to trigger HTTP requests from any HTML element, not just traditional form elements like <form> and <a> tags.

Dynamic Content Swapping with `hx-swap`

One of the key features of HTMX is its ability to dynamically update portions of a web page without full page reloads. The hx-swap attribute controls how the response from an HTTP request is integrated into the current page.

For instance, using hx-swap="outerHTML" will replace the entire HTML element that initiated the request with the content received from the server.

<button hx-post="/another-endpoint" hx-swap="outerHTML">Swap Button</button>

In this example, upon a successful POST request to /another-endpoint, the button itself will be replaced by the server’s response.

Backend Dependency and Full-Stack Applications

It’s important to note that HTMX is designed for full-stack applications. Unlike front-end libraries like Alpine.js, which are often used for enhancing client-side interactivity within HTML without server communication, HTMX relies on server-side processing to handle requests and generate responses. While Alpine.js excels at adding simple conditional logic and loops directly in HTML, HTMX is geared towards applications requiring dynamic data retrieval and server-side interactions. However, HTMX can be used alongside libraries like Alpine.js for more complex front-end behaviors.

Backend Flexibility

HTMX is backend-agnostic, meaning it can be used with various server-side technologies. While examples in this chapter will utilize Node.js and Express, HTMX is compatible with any backend capable of handling HTTP requests and returning HTML responses. Popular backend frameworks like Django (Python) and Go are frequently used in conjunction with HTMX.

Backend-Agnostic: Refers to a technology that is not dependent on any specific backend programming language, framework, or operating system. It can function with a variety of different backend systems.

Lightweight Nature and Performance Benefits

HTMX is remarkably lightweight, with a footprint of only 14 kilobytes. This small size contributes to faster page load times and reduced bandwidth consumption, making it an efficient choice for dynamic web applications. For projects requiring dynamic functionality without the complexity and overhead of larger front-end frameworks like React or Vue.js, HTMX presents a compelling alternative.

Key HTMX Attributes

HTMX provides a rich set of attributes to control HTTP requests and DOM manipulation. Let’s explore some fundamental attributes:

hx-get: Initiates a GET request to the specified URL. Used to retrieve data from the server.
hx-post: Initiates a POST request to the specified URL. Typically used to submit data to the server to create or update resources.
hx-put: Initiates a PUT request. Used to update an entire resource at a specific URL.
hx-patch: Initiates a PATCH request. Used to partially modify a resource at a specific URL.
hx-delete: Initiates a DELETE request. Used to remove a resource at a specific URL.
hx-swap: Determines how the response from the server is swapped into the DOM. Common values include:
- outerHTML: Replaces the entire element.
- innerHTML: Replaces the content of the element.
- beforeend: Inserts the response as the last child of the element.
- afterbegin: Inserts the response as the first child of the element.
- afterend: Inserts the response after the element.
- beforebegin: Inserts the response before the element.
hx-target: Specifies the target element in the DOM that will be updated with the server’s response. This allows you to update elements other than the one triggering the request. Targets can be selected using CSS selectors, IDs, or keywords like this (the current element), next sibling, or previous sibling.
hx-trigger: Defines the event that triggers the HTTP request. Common events include:
- click: Triggered on a mouse click. (Default for buttons)
- mouseover: Triggered when the mouse cursor hovers over the element.
- submit: Triggered when a form is submitted. (Default for forms)
- input: Triggered when the value of an input element changes.
- changed: Triggered when the value of an input element changes and the element loses focus.
- every <duration>: Triggers a request at specified intervals (polling).

Practical Examples: Building Dynamic Features with HTMX

The following sections will demonstrate practical applications of HTMX through example projects using Node.js and Express for the backend.

Setting up a Basic Node.js and Express Server

To illustrate HTMX functionality, we will first set up a basic Node.js and Express server to handle backend requests.

Node.js: An open-source, cross-platform JavaScript runtime environment that executes JavaScript code server-side.

Express: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Prerequisites: Ensure Node.js is installed on your system. You can download it from nodejs.org.

Project Initialization:

Create a project directory and navigate into it in your terminal.
Initialize a package.json file using npm init -y. This file manages project dependencies and scripts.
Install Express and Nodemon as dependencies:
```
npm install express
npm install nodemon -D
```
npm (Node Package Manager): The default package manager for Node.js. It is used to install, manage, and share JavaScript packages.

Nodemon: A utility that monitors for changes in your Node.js application and automatically restarts the server. Useful for development. The -D flag installs it as a development dependency.

Modify package.json to use ES modules and add a development script:

{
  "name": "htmx-example",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

Setting "type": "module" enables the use of import syntax instead of require.

Create a file named server.js in the project root. This will be our server entry point.

Basic Server Code (server.js):

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const port = 3000;

// Middleware to serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Middleware to parse JSON request bodies
app.use(express.json());
// Middleware to parse URL-encoded request bodies
app.use(express.urlencoded({ extended: true }));

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

This code sets up a basic Express server that:

Serves static files (like HTML, CSS, JavaScript, images) from a public folder.
Includes middleware to handle JSON and URL-encoded data in request bodies.
Starts the server and listens on port 3000.

Creating a Public Directory and index.html:

Create a folder named public in the project root.
Inside the public folder, create a file named index.html.

Basic HTML (public/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 Crash Course</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <h1 class="text-center text-4xl font-bold my-5">Hello</h1>
</body>
</html>

This HTML file includes:

A basic HTML structure.
Inclusion of the HTMX library via CDN (Content Delivery Network).

CDN (Content Delivery Network): A geographically distributed network of servers that cache static content (like JavaScript libraries, CSS files, images) and deliver it to users based on their location, improving loading speed.
Inclusion of Tailwind CSS via CDN for styling.

Tailwind CSS: A utility-first CSS framework that provides pre-defined CSS classes to style HTML elements directly in the markup, enabling rapid styling and customization.

You can now run the server using npm run dev in your terminal and access http://localhost:3000 in your browser to see “Hello” displayed.

Example 1: Fetching User Data Dynamically

This example demonstrates fetching user data from a public API (JSONPlaceholder) and displaying it on the page using HTMX attributes.

Modified index.html (in public/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 Crash Course</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center">
    <h1 class="text-2xl font-bold my-5">Simple Request Example</h1>

    <button
        class="bg-blue-500 text-white py-2 px-3 my-5 rounded-lg"
        hx-get="/users"
        hx-target="#users"
        hx-indicator="#loading"
    >
        Fetch Users
    </button>

    <div id="loading" class="htmx-indicator">
        <img class="m-auto h-10" src="/img/loader.gif" alt="Loading...">
    </div>

    <div id="users">
        <!-- User list will be loaded here -->
    </div>

    <script>
        // Optional: Mimic slower server for demonstration purposes
        // (Server-side delay is preferred in real scenarios)
    </script>
</body>
</html>

Create public/img/loader.gif: Place a loading GIF image (like the one mentioned in the transcript) in a new img folder within the public directory. You can find a suitable loader image online or use a simple spinner GIF.

Modified server.js:

// ... (imports and server setup from previous example) ...

let counter = 0; // For polling example (later)

app.get('/users', async (req, res) => {
    // Simulate server delay (remove in production)
    await new Promise(resolve => setTimeout(resolve, 2000));

    const limit = Number(req.query.limit) || 10; // Get limit from query or default to 10
    const apiUrl = `https://jsonplaceholder.typicode.com/users?_limit=${limit}`;

    try {
        const response = await fetch(apiUrl);
        const users = await response.json();

        let userListHTML = `<h2 class="text-2xl font-bold my-4">Users</h2><ul>`;
        users.forEach(user => {
            userListHTML += `<li>${user.name}</li>`;
        });
        userListHTML += `</ul>`;

        res.send(userListHTML);
    } catch (error) {
        console.error("Error fetching users:", error);
        res.status(500).send("Error fetching users");
    }
});

// ... (server listen code) ...

Explanation:

HTML (index.html):
- A button with hx-get="/users" initiates a GET request to the /users endpoint on click.
- hx-target="#users" specifies that the response should be placed inside the div with the ID users.
- hx-indicator="#loading" shows the element with ID loading while the request is in progress.
- A div with ID loading and class htmx-indicator contains the loading image. HTMX automatically manages the visibility of elements with the htmx-indicator class during requests.
- An empty div with ID users acts as the target container for the user list.
Server (server.js):
- The /users route handler:
  - Introduces a 2-second delay using setTimeout to demonstrate the loading indicator (remove in production).
  - Fetches user data from the JSONPlaceholder API using fetch.
  - Constructs an HTML list of users from the API response.
  - Sends the HTML list back as the response using res.send().

Running the Example:

Ensure the server is running (npm run dev).
Open http://localhost:3000 in your browser.
Click the “Fetch Users” button. You should see the loading indicator while the data is fetched, and then the list of users will appear below the button.

Example 2: Temperature Conversion Form

This example demonstrates using a form to submit data to the server for temperature conversion and displaying the result dynamically.

Create public/request.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Converter</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200">
    <div class="container mx-auto mt-10 p-5 bg-white rounded-md shadow-lg">
        <div class="card p-6">
            <h1 class="text-2xl font-bold mb-4 text-center">Temperature Converter</h1>
            <form hx-post="/convert" hx-target="#result" hx-indicator="#loading" hx-trigger="submit">
                <div class="mb-4">
                    <label for="fahrenheit" class="block text-gray-700 text-sm font-bold mb-2">Fahrenheit:</label>
                    <input type="number" id="fahrenheit" name="fahrenheit" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter Fahrenheit temperature" value="32">
                </div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Convert to Celsius
                </button>
            </form>
             <div id="loading" class="htmx-indicator mt-2">
                <img class="m-auto h-10" src="/img/loader.gif" alt="Loading...">
            </div>
            <div id="result" class="mt-6 text-xl text-center">
                <!-- Conversion result will be displayed here -->
            </div>
        </div>
    </div>
</body>
</html>

Modified server.js:

// ... (imports and server setup from previous example) ...

app.post('/convert', async (req, res) => {
    await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate delay
    const fahrenheit = parseFloat(req.body.fahrenheit);
    const celsius = (fahrenheit - 32) * 5 / 9;

    const resultHTML = `<p>${fahrenheit}° Fahrenheit is equal to ${celsius.toFixed(1)}° Celsius</p>`;
    res.send(resultHTML);
});

// ... (user fetching route and server listen code) ...

Explanation:

HTML (request.html):
- A form with hx-post="/convert" sends a POST request to the /convert endpoint when submitted.
- hx-target="#result" targets the div with ID result to display the conversion output.
- Input field with name="fahrenheit" allows the server to access the entered Fahrenheit value via req.body.fahrenheit.
Server (server.js):
- The /convert route handler:
  - Retrieves the Fahrenheit value from the request body using req.body.fahrenheit.
  - Calculates Celsius.
  - Constructs an HTML paragraph containing the conversion result.
  - Sends the HTML paragraph as the response.

Running the Example:

Ensure the server is running (npm run dev).
Open http://localhost:3000/request.html in your browser.
Enter a Fahrenheit temperature and click “Convert to Celsius”. The Celsius equivalent will be displayed dynamically below the form.

Example 3: Polling for Real-Time Updates

This example demonstrates polling, where HTMX periodically sends requests to the server to fetch updated data, simulating real-time updates.

Create public/polling.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polling Example</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-blue-900 text-white flex justify-center items-center h-screen">
    <div class="text-center">
        <h1 class="text-xl mb-4">Weather in New York</h1>
        <p class="text-5xl">
            <span
                hx-get="/get-temperature"
                hx-trigger="every 5s"
            >
                Loading...
            </span>
        </p>
    </div>
</body>
</html>

Modified server.js:

// ... (imports and server setup from previous example) ...

let currentTemperature = 20; // Initial temperature

app.get('/get-temperature', (req, res) => {
    currentTemperature += (Math.random() * 2) - 1; // Simulate temperature change
    res.send(`${currentTemperature.toFixed(1)}°C`);
});

// ... (convert route, user fetching route, and server listen code) ...

Explanation:

HTML (polling.html):
- A span element with hx-get="/get-temperature" and hx-trigger="every 5s" initiates a GET request to /get-temperature every 5 seconds.
- The response from the server will replace the content of the span element.
Server (server.js):
- The /get-temperature route handler:
  - Simulates a temperature change by adding a random value to currentTemperature.
  - Sends the updated temperature value (with one decimal place and a degree Celsius symbol) as the response.

Running the Example:

Ensure the server is running (npm run dev).
Open http://localhost:3000/polling.html in your browser.
You will see “Loading…” initially, and then the temperature will be displayed and updated every 5 seconds, simulating real-time weather updates.

This example demonstrates building a real-time search widget that filters contacts as the user types.

Create public/search.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Search</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-blue-900">
    <div class="container mx-auto p-4">
        <div id="loading" class="htmx-indicator">
            <img class="m-auto h-10" src="/img/loader.gif" alt="Loading...">
        </div>
        <div class="bg-gray-800 p-6 rounded-md shadow-md">
            <h1 class="text-white text-2xl font-bold mb-4">Contact Search</h1>
            <input
                type="text"
                name="search"
                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4 text-black"
                placeholder="Search contacts..."
                hx-post="/search-api"
                hx-trigger="input changed delay:500ms"
                hx-target="#search-results"
                hx-indicator="#loading"
            >
            <div class="overflow-x-auto">
                <table class="min-w-full bg-gray-700 text-white">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 border-b">Name</th>
                            <th class="px-4 py-2 border-b">Email</th>
                        </tr>
                    </thead>
                    <tbody id="search-results">
                        <!-- Search results will be loaded here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Modified server.js:

// ... (imports and server setup from previous example) ...

const contacts = [ // Example contact data
    { id: 1, name: "John Doe", email: "[email protected]" },
    { id: 2, name: "Jane Smith", email: "[email protected]" },
    { id: 3, name: "Peter Jones", email: "[email protected]" },
    { id: 4, name: "Alice Wonderland", email: "[email protected]" },
    { id: 5, name: "Bob The Builder", email: "[email protected]" },
    { id: 6, name: "Lean Green", email: "[email protected]" },
    // ... more contacts
];

app.post('/search-api', async (req, res) => {
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate delay
    const searchTerm = req.body.search?.toLowerCase();

    if (!searchTerm) {
        return res.send("<tr><td colspan='2'></td></tr>"); // Empty table row if no search term
    }

    const searchResults = contacts.filter(contact => {
        const name = contact.name.toLowerCase();
        const email = contact.email.toLowerCase();
        return name.includes(searchTerm) || email.includes(searchTerm);
    });

    let searchResultHTML = '';
    searchResults.forEach(contact => {
        searchResultHTML += `
            <tr>
                <td class="px-4 py-2 border-b"><div class="my-4 p-2">${contact.name}</div></td>
                <td class="px-4 py-2 border-b"><div class="my-4 p-2">${contact.email}</div></td>
            </tr>
        `;
    });

    res.send(searchResultHTML);
});

// ... (get temperature, convert, user fetching routes, and server listen code) ...

Explanation:

HTML (search.html):
- Input field with hx-post="/search-api" sends a POST request to /search-api as the user types.
- hx-trigger="input changed delay:500ms" triggers the request on input change with a 500ms delay to prevent excessive requests.
- hx-target="#search-results" targets the tbody with ID search-results to display search results in the table.
Server (server.js):
- The /search-api route handler:
  - Retrieves the search term from req.body.search.
  - Filters the contacts array based on name and email matching the search term.
  - Constructs HTML table rows (<tr>) for each matching contact.
  - Sends the HTML table rows as the response.

Running the Example:

Ensure the server is running (npm run dev).
Open http://localhost:3000/search.html in your browser.
Start typing in the search input. After a short delay, the table will dynamically update with contacts matching your search term.

Example 5: Inline Form Validation

This example demonstrates inline form validation, where HTMX is used to validate an email address field and display validation messages dynamically.

Create public/validation.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Form Validation</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto mt-10 p-5 bg-white rounded-md shadow-lg">
        <h1 class="text-2xl font-bold mb-4 text-center">Contact Form</h1>
        <form class="p-6">
            <div class="mb-4">
                <div>
                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
                </div>
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="Enter your email"
                    hx-post="/contact/email"
                    hx-target="this"
                    hx-swap="outerHTML"
                >
            </div>
            <div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Submit
                </button>
            </div>
        </form>
    </div>
</body>
</html>

Modified server.js:

// ... (imports and server setup from previous example) ...

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Simple email regex

const isValidMessage = { message: "Email is valid", class: "text-green-700" };
const isInvalidMessage = { message: "Please enter a valid email address", class: "text-red-700" };

app.post('/contact/email', async (req, res) => {
    const submittedEmail = req.body.email;

    const validationResult = emailRegex.test(submittedEmail) ? isValidMessage : isInvalidMessage;

    const emailFieldHTML = `
        <div>
            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
        </div>
        <input
            type="email"
            id="email"
            name="email"
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline ${validationResult.class}"
            placeholder="Enter your email"
            hx-post="/contact/email"
            hx-target="this"
            hx-swap="outerHTML"
            value="${submittedEmail}"
        >
        <div class="${validationResult.class} text-sm mt-1">${validationResult.message}</div>
    `;

    res.send(emailFieldHTML);
});

// ... (search API, get temperature, convert, user fetching routes, and server listen code) ...

Explanation:

HTML (validation.html):
- Input field with hx-post="/contact/email" sends a POST request to /contact/email when the input loses focus (default trigger for input).
- hx-target="this" targets the input element itself.
- hx-swap="outerHTML" replaces the input element (and its surrounding div) with the server’s response.
Server (server.js):
- The /contact/email route handler:
  - Retrieves the submitted email from req.body.email.
  - Validates the email using a regular expression (emailRegex).
  - Determines the appropriate validation message (isValidMessage or isInvalidMessage) based on the validation result.
  - Constructs HTML for the input field and a validation message div, dynamically adding CSS classes based on the validation result.
  - Sends the HTML as the response, replacing the original input field with the validated version.

Running the Example:

Ensure the server is running (npm run dev).
Open http://localhost:3000/validation.html in your browser.
Type an email address into the input field. When you click outside the input or move to another field, the email will be validated, and a dynamic validation message (valid or invalid) will appear below the input field.

Conclusion

HTMX offers a powerful and efficient approach to building dynamic web front-ends without the complexities of traditional JavaScript frameworks. By extending HTML with hyperscript attributes, HTMX allows developers to create interactive user interfaces by simply declaratively defining behaviors directly in their HTML. This approach can lead to cleaner, more maintainable code and faster development cycles, especially for full-stack web applications where server-side rendering and dynamic updates are crucial. While HTMX relies on backend processing, its lightweight nature and compatibility with various backend technologies make it a versatile tool for modern web development.

YouTube Courses - Learn Smarter

HTMX: Building Dynamic Front-Ends Without JavaScript

Introduction to HTMX

Core Concept: Hyperscript Attributes

Addressing Limitations of Traditional HTML

Dynamic Content Swapping with `hx-swap`

Backend Dependency and Full-Stack Applications

Backend Flexibility

Lightweight Nature and Performance Benefits

Key HTMX Attributes

Practical Examples: Building Dynamic Features with HTMX

Setting up a Basic Node.js and Express Server

Example 1: Fetching User Data Dynamically

Example 2: Temperature Conversion Form

Example 3: Polling for Real-Time Updates

Example 4: Real-Time Search Widget

Example 5: Inline Form Validation

Conclusion

HTMX: Building Dynamic Front-Ends Without JavaScript

Introduction to HTMX

Core Concept: Hyperscript Attributes

Addressing Limitations of Traditional HTML

Dynamic Content Swapping with hx-swap

Backend Dependency and Full-Stack Applications

Backend Flexibility

Lightweight Nature and Performance Benefits

Key HTMX Attributes

Practical Examples: Building Dynamic Features with HTMX

Setting up a Basic Node.js and Express Server

Example 1: Fetching User Data Dynamically

Example 2: Temperature Conversion Form

Example 3: Polling for Real-Time Updates

Example 4: Real-Time Search Widget

Example 5: Inline Form Validation

Conclusion

Dynamic Content Swapping with `hx-swap`