Don’t Let JavaScript Overcomplicate Your Projects
Just want to build a “Like” button without a page reload or a real-time search filter? Don’t rush to install React or Vue. In reality, many small projects today are burdened with 300MB of node_modules just to render a few lines of text. Configuring Webpack or Vite can sometimes take more time than writing the actual business logic.
I once spent an entire morning just trying to sync the state between a Python Backend and a React Frontend for an internal dashboard. Having logic split across two places made maintenance extremely difficult. We are overusing the Single Page Application (SPA) model for tasks that are inherently simple.
HTMX emerges as a lightweight alternative. It helps you bring everything back to the primitive nature of the Web while still ensuring a smooth user experience.
What is HTMX?
HTMX is not a massive framework. It is an ultra-lightweight library, only about 14KB (gzipped). It allows you to access modern browser features directly through HTML attributes, instead of writing vanilla JavaScript or using external libraries.
Normally, only <a> and <form> tags can send HTTP requests. HTMX breaks that limit. Now, any element such as a div, button, or input can send GET, POST, PUT, and DELETE requests. Instead of receiving raw JSON, the server returns an HTML fragment. HTMX then automatically inserts this fragment into the location you specify.
The Power of Hypermedia-driven Development (HDD)
Try changing your perspective. In the traditional React model, the server is just a “delivery person” returning JSON data. With HTMX, the server acts as the “architect” directly creating the interface.
When applying HDD, all business logic is centralized in the Backend. The browser only needs to display what the server sends. This approach completely eliminates the complex JSON conversion (serialization/deserialization) step. You will save significant development time and minimize synchronization errors.
If you need to process data quickly during backend coding, try the tools at toolcraft.app. I often use it to format JSON or test Regex quickly without opening heavy extensions.
Hands-on: Integrating HTMX into Flask with 0 Lines of JS
We will build a simple Todo List application. The add feature will work smoothly without reloading the entire page.
Install the Flask environment:
pip install FlaskWrite the logic for the app.py file:
from flask import Flask, render_template, request
app = Flask(__name__)
todos = ["Learn HTMX", "Write for itfromzero"]
@app.route("/")
def index():
return render_template("index.html", todos=todos)
@app.route("/add-todo", methods=["POST"])
def add_todo():
new_todo = request.form.get("todo")
if new_todo:
todos.append(new_todo)
# Only return the new item as an HTML fragment
return f"<li>{new_todo}</li>"
if __name__ == "__main__":
app.run(debug=True)Configure the index.html template:
<script src="https://unpkg.com/[email protected]"></script>
<h1>Todo List</h1>
<form hx-post="/add-todo" hx-target="#todo-list" hx-swap="beforeend" hx-on::after-request="this.reset()">
<input type="text" name="todo" placeholder="Add new task...">
<button type="submit">Add</button>
</form>
<ul id="todo-list">
{% for todo in todos %}
<li>{{ todo }}</li>
{% endfor %}
</ul>Three important attributes you need to remember:
hx-post: Sends a POST request as soon as the form is submitted.hx-target: Specifies where to receive the new content from the server.hx-swap="beforeend": Inserts the new content at the end of the list instead of replacing the entire content.
Combining FastAPI and HTMX for Performance Optimization
FastAPI, with its async processing capabilities, is the perfect partner for HTMX. This combination significantly reduces latency compared to waiting for Client-side rendering.
from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def read_item(request: Request):
return templates.TemplateResponse("index.html", {"request": request, "items": ["FastAPI", "HTMX"]})
@app.post("/search", response_class=HTMLResponse)
async def search(request: Request, q: str = Form(...)):
results = [item for item in ["Python", "JavaScript", "C++"] if q.lower() in item.lower()]
return templates.TemplateResponse("partials/results.html", {"request": request, "results": results})The secret here is using “partials” templates. You only render a small part of the UI when there is a request from HTMX. This method saves bandwidth and reduces the load on the server’s CPU.
Important Lessons from Real-world Experience
After implementing HTMX for several administrative systems, I’ve drawn 4 key lessons:
- Choose the right tool: HTMX was not created to build applications like Google Maps or Photoshop Online. It is strongest for Blogs, Dashboards, or E-commerce sites.
- Leverage hx-trigger: You can create a Live Search feature with just one attribute. Use
keyup changed delay:500msto avoid sending too many requests to the server. - Data Safety: Always escape data to prevent XSS vulnerabilities. Template engines like Jinja2 usually handle this automatically, but you should still double-check.
- Error Checking: Open the Network tab in DevTools to monitor. You will see that HTMX requests are very transparent, with HTML content returned directly.
Conclusion
HTMX does not completely replace JavaScript frameworks. However, it helps Backend Developers confidently build high-interaction applications without getting bogged down in the rapidly changing JS ecosystem. If you are working on a personal project or an internal tool, try installing HTMX. Sometimes, simplicity is the key to efficiency.
