Implementing HTMX with Flask and Jinja2 for Dynamic Content Rendering

#flask #htmx #python #backend

HTMX is a lightweight JavaScript library that allows you to build dynamic, modern web applications without relying on heavy front-end frameworks. Combined with Flask and Jinja2, you can create rich, interactive user experiences while keeping your tech stack simple and Pythonic.

In this tutorial, we'll walk through integrating HTMX into a Flask project using Jinja2 templates for dynamic, server-rendered content updates.

Step 1: Set Up Your Flask Project

Start by creating a virtual environment and installing Flask:

python -m venv venv
source venv/bin/activate  # On Windows, use venv\Scripts\activate
pip install flask

Create a basic folder structure:

project/
│
├── app.py
├── templates/
│   ├── index.html
│   └── partials/
│       └── more_items.html
└── static/
    └── htmx.min.js

Download the latest HTMX library and save it as htmx.min.js in the static folder, or include it via CDN.

Step 2: Create the Flask App

Inside app.py, set up a basic Flask application:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/load-more")
def load_more():
    items = ["Item A", "Item B", "Item C"]
    return render_template("partials/more_items.html", items=items)

if __name__ == "__main__":
    app.run(debug=True)

Step 3: Build the Base Template with HTMX

Create templates/index.html to serve your main page. Add a button that fetches additional content via HTMX:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTMX + Flask</title>
  <script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
</head>
<body>
  <h1>Welcome to HTMX with Flask</h1>

  <div id="items">
    <p>Initial content here...</p>
  </div>

  <button 
    hx-get="/load-more" 
    hx-target="#items" 
    hx-swap="afterend">
    Load More
  </button>
</body>
</html>

Step 4: Create the Partial Template

Create templates/partials/more_items.html. This template will be returned via HTMX when the button is clicked:

{% for item in items %}
  <p>{{ item }}</p>
{% endfor %}

Step 5: Run the App and Test It

Start the Flask development server:

python app.py

Open your browser to http://127.0.0.1:5000/ and click the “Load More” button. You’ll see new items loaded dynamically below your original content - without a full page refresh or JavaScript code!

✅ Pros:

⚡ Super fast and light - no frontend framework needed
🤝 Perfect synergy with Flask and Jinja2
🔄 Clean separation of concerns (server-rendered templates + dynamic interactions)

⚠️ Cons:

📦 Requires careful handling for complex UI interactions
🧱 Partial templates can get messy without good file structure

Summary

With just a few lines of HTML and no complex JavaScript, HTMX allows you to bring your Flask + Jinja2 apps to life with dynamic content updates. It's a perfect fit for Python developers who want to keep things simple and avoid bloated frontend stacks.

📘 Want to dive deeper?

For a more advanced and structured look into HTMX - including form handling, pagination, and progressive enhancement - grab my 24-page PDF tutorial for just $10:

👉 HTMX Tutorial: Build Modern Web Apps Without JavaScript Frameworks

If you found this helpful, feel free to also support me here: Buy Me a Coffee ☕