Go to content|Go to the main menu|Go to search
Modern web development often relies on JavaScript frameworks such as React, Vue, or Angular. While these are powerful tools, they often come with unnecessary complexity — a cost not every project can afford.
There’s a whole category of projects that are simply too small for such frameworks, whether due to limited scope or resources. At the same time, these projects could benefit from improved web UX through just a touch of interactivity. Think internal tools, admin interfaces, prototypes, or MVPs — typically server-side rendered (SSR) applications.
HTMX steps in as an elegant solution: a lightweight library that lets us use AJAX, WebSockets, and more through HTML attributes alone. This means even a backend developer can play full-stack for a while — no JavaScript required.
Here’s what working with HTMX might look like:
<button hx-get="/data" hx-target="#result">Upload data</button>
<div id="result"></div>
After clicking the button, an AJAX request is sent to /data, and the server's response is injected into the <div> with the ID result.
HTMX doesn't transform the response — whatever is returned it must already be in its final hypertext form. So instead of letting the frontend manage application state, the server stays in control, providing not just data but also the links that guide users through different states.
One of HTMX’s biggest advantages is how easy it is to get started. There's no need to compile code or mess with npm packages. Just add a <script> tag:
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
And we can start experimenting and adding new interactive elements — even in an existing app.
Better yet, HTMX integrates seamlessly with existing backends. The only requirement is that it must support the HTTP protocol and return HTML. For SSR applications, that means we don’t need to change a thing — just add an endpoint that returns a snippet of HTML. For example, in Python using Flask:
@app.route("/data")
def data():
return "<p>Hello World!</p>"
Combining the snippets above, we now have a simple button that displays “Hello World!” when clicked. But creating a form is just as easy:
<!-- frontend: -->
<form hx-post="/submit" hx-target="#response">
<input type="text" name="name" placeholder=" Type a name">
<button type="submit">Send</button>
</form>
<div id="response"></div>
# backend:
@app.route("/submit", methods=["POST"])
def submit_form():
name = request.form.get("name", "Unknown")
return f"<p>Hello, {name}!</p>"
This simple setup is already enough for many use cases. But HTMX can do other magic, supporting features like infinite scroll, live search suggestions, progress indicators, and lazy loading with an indicator. You’ll find plenty of examples (and live demos) on the official HTMX website, where you can even try it out.
HTMX excels at dynamic content loading and server-based interactivity without any problems, but we may encounter situations where it is no longer enough. This can occur when we need client-side interactions without server-side communication. In this case, we can start "digging" directly in JavaScript or use one of the minimalist JS frameworks like Alpine.js. Or, if we're feeling adventurous, the esoteric HyperScript, which has the same people behind it as HTMX.
HTMX can be an interesting alternative to JavaScript frameworks especially when we want to keep things simple, server-rendered, and dependency-light, yet still benefit from a modern interactive experience. And thanks to the simple linking directly to HTML, you can try it out right away and judge if it's the right choice!
Thank you for your interest in subscribing to our newsletter! To complete your registration you need to confirm your subscription. We have just sent you a confirmation link to the email address you provided. Please click on this link to complete your registration. If you do not find the email, please check your spam or "Promotions" folder.
