Gavin Wiggins

Notes   /   Links   /   Contact


GET Request with Quart and htmx

Written on November 9, 2025

Quart is an asyncio reimplementation of Flask that supports HTML rendering and more. It can be used with htmx to access modern browser features directly from HTML, rather than using JavaScript. This example uses htmx with an HTML button to send a GET request to a Quart app. The app responds with an HTML snippet which htmx automatically displays in the web page.

The project structure is shown below:

myproject/
├── static/
│   └── style.css
├── templates/
│   ├── index.html
│   └── snippet.html
├── app.py
└── pyproject.toml

The app.py contains the Quart app which serves the index page and returns an HTML paragraph from the snippet route.

# app.py

from quart import Quart, render_template

app = Quart(__name__)


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


@app.get("/snippet")
async def button_example():
    return await render_template("snippet.html")


app.run()

Contents of the index.html and snippet.html templates are shown below. Notice the use of the hx attributes on the button for the GET request, target element, and content swap.

<!-- index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
    <title>Example of htmx</title>
  </head>
  <body>
    <main>
      <h1>Hello World</h1>

      <p>Click button to add HTML snippet.</p>

      <div id="results"></div>

      <button hx-get="/snippet" hx-target="#results" hx-swap="afterend">
        Get Snippet
      </button>
    </main>
  </body>
</html>

<!-- snippet.html -->

<p>
  This is an HTML snippet!
</p>

Run the application with uv run app.py, open your browser at 127.0.0.1:5000, then click the button in the web page. This will use htmx to add the paragraph from snippet.html after the results div. In the image below, the Get Snippet button was clicked three times.

web page from quart app

More information about Quart is available at https://quart.palletsprojects.com and more info about htmx is at https://htmx.org. See the projects/quart-htmx-get directory in the pythonic repo on GitHub for the example code.


Gavin Wiggins © 2025
Made on a Mac with Genja. Hosted on GitHub Pages.