Rapid HTMX Search

This project explores building fast, elegant interfaces with HTMX, a lightweight library that brings modern, server‑driven patterns to traditional HTML. It demonstrates clean, minimal‑JavaScript architecture by sending targeted server requests and swapping returned HTML fragments into the page — no full reloads or client‑side framework like React.

Show example HTMX request

When the form is submitted, HTMX posts a request to the Express server with the movieTitle. The server processes the request, fetches matching movies, and returns an HTML snippet that HTMX swaps into the page without a full reload.

<form
  hx-post="/search"
  hx-target="#result"
  hx-swap="innerHTML"
>
  <input type="text" name="movieTitle" placeholder="Search for a movie…" />
</form>
<div id="result"></div>

// Express route handler for HTMX search request
app.post("/search", async (req, res) => {
  const movies = await fetchMovies(req.body.movieTitle);
  res.send(renderMovieList(movies)); // HTMX swaps this into #result
});