` and swapping its content via `hx-swap` (no page reload needed).
- The `/update-greeting` route (HTTP POST) returns a new greeting fragment (from `update_greeting()`), which HTMX inserts into the page’s DOM to replace the old greeting ([GitHub - AnswerDotAI/fasthtml: The fastest way to create an HTML app](https://github.com/AnswerDotAI/fasthtml#:~:text=You%20now%20have%20a%20page,returned%20by%20the%20second%20route)).
## Implementation Overview
### App Initialization
We start by importing the FastHTML utilities and initializing the app. The **`fasthtml.common`** module provides the HTML component classes (like `Div`, `P`, `Button`) and functions for creating and running the app. We call **`fast_app()`** to get an `app` instance and an `rt` decorator for defining routes. This is the idiomatic way to set up a FastHTML app with sensible defaults ([Understanding FastHTML Routes, Requests, and Redirects](https://audrey.feldroy.com/nbs/2025-01-10-Understanding-FastHTML-Routes-Requests-and-Redirects#:~:text=from%20fasthtml.common%20import%20)). At the end of the script, we use `serve()` to launch the development server when the script runs.
### HTML Fragment Helper Functions
Next, we define two small helper functions, **`html_fragment()`** and **`update_greeting()`**, to generate the HTML snippets for our greeting message. Using these helpers keeps the route logic simple and avoids duplicating markup. Each function returns a FastHTML element (e.g. a `Div` containing a `P` tag) representing a greeting message. In our example, the fragment includes a greeting string and the current time, so we can clearly see the content change after an update. (FastHTML lets us construct HTML elements using Python objects like `Div(...)` and `P(...)` directly.)
### Main Page Route (`GET /`)
The home page is handled by the **`main_page()`** function, registered with **`@rt('/', methods=['GET'])`**. We explicitly specify the GET method for clarity, instead of relying on the function name (if we had named it `get`, FastHTML would infer it’s a GET handler automatically ([fasthtml/examples/adv_app.py at main · AnswerDotAI/fasthtml · GitHub](https://github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py#:~:text=The%20name%20of%20the%20decorated,HTTP%20verb%20for%20the%20handler))). Inside the handler, we assemble the page content step by step:
- **Generate** the initial greeting element by calling `html_fragment()`.
- **Wrap** this greeting in a `Div(id="greeting")` container, which will serve as the target for updates.
- **Create** a `Button("Update Greeting", ...)` with HTMX attributes: `hx_post="/update-greeting"` sends a POST request to the update URL when clicked, `hx_target="#greeting"` directs the response to replace the content of the `#greeting` div, and `hx_swap="innerHTML"` specifies that the inner HTML of that div should be swapped. (We pass these as `hx_post`, `hx_target`, `hx_swap` in Python; FastHTML converts underscores to hyphens to produce the proper `hx-*` HTML attributes ([fasthtml/examples/adv_app.py at main · AnswerDotAI/fasthtml · GitHub](https://github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py#:~:text=)).)
- **Combine** everything into a top-level `Div` containing an `H1` title, the greeting container, and the update button, then `return` it.
FastHTML will take this returned `Div` and generate a full HTML page around it (including the `......` wrapper and necessary scripts). Thus, our `main_page` route sends an initial complete page to the client with a greeting and an **Update Greeting** button.
### Update Greeting Route (`POST /update-greeting`)
We also define an **`update_greeting_route()`** function to handle the POST request when the user clicks the button. It’s registered with **`@rt('/update-greeting', methods=['POST'])`** and simply returns a new greeting fragment by calling `update_greeting()`. This route is intended to be called via HTMX, so returning just the snippet (a `
...
` fragment) is sufficient. The server’s response will contain this HTML fragment, and HTMX will **replace** the content of the `#greeting` div in the page with the new fragment – all without refreshing the page ([GitHub - AnswerDotAI/fasthtml: The fastest way to create an HTML app](https://github.com/AnswerDotAI/fasthtml#:~:text=You%20now%20have%20a%20page,returned%20by%20the%20second%20route)). We use a descriptive name `update_greeting_route` to emphasize its purpose, and we explicitly declare the POST method for clarity.
### Running the App
At the bottom of the script, we invoke **`serve()`** to start the development server. When you run this Python script (e.g. `python fasthtml_app.py`), it will launch a local web server (by default on port 5001) and print the URL in the console ([GitHub - AnswerDotAI/fasthtml: The fastest way to create an HTML app](https://github.com/AnswerDotAI/fasthtml#:~:text=Running%20the%20app%20with%20,created%20your%20first%20FastHTML%20app)). Open that URL (e.g. `http://localhost:5001`) in your browser to see the app in action. You should see the greeting message and the **Update Greeting** button. Clicking the button will send a POST request to the server and update the greeting text on the page dynamically, without a full page reload.
## Complete Script
Below is the complete Python script implementing the above functionality. Save this as a `.py` file (for example, `fasthtml_app.py`) and run it to start the app:
Below is the same complete, runnable FastHTML example using the stacked‑attribute (or “stacked signature”) style. This style leverages Python’s ability to break lines inside function calls for better clarity and to emphasize the mapping of Python arguments to HTML attributes. Notice that we use the `fast_app()` helper to get the app and router, and we define explicit HTTP methods with descriptive handler names:
```python
from datetime import datetime
from fasthtml.common import *
app, rt = fast_app()
def html_fragment():
"""Generate a greeting HTML fragment with the current time."""
current_time = datetime.now().strftime("%H:%M:%S")
return Div(
P(f"Hello! The time is {current_time}")
)
def update_greeting():
"""Generate a new greeting fragment (with updated time)."""
new_time = datetime.now().strftime("%H:%M:%S")
return Div(
P(f"Hello again! Now the time is {new_time}")
)
@rt("/", methods=["GET"])
def main_page():
# Build the main page with an initial greeting and an HTMX-powered update button
greeting_section = Div(
html_fragment(),
id="greeting"
)
update_button = Button(
"Update Greeting",
hx_post="/update-greeting",
hx_target="#greeting",
hx_swap="innerHTML"
)
return Div(
H1("FastHTML Greeting Example"),
greeting_section,
update_button
)
@rt("/update-greeting", methods=["POST"])
def update_greeting_route():
# Return a new greeting fragment in response to the HTMX request
return update_greeting()
# Run the application when this script is executed
serve()
```
### Explanation
- **Stacked Attributes**:
Each call to the HTML element functions (like `Div`, `P`, and `Button`) uses a stacked style. The arguments are each on their own line. This makes it crystal clear how Python arguments (e.g. `hx_post`) map to HTML attributes (i.e. `hx-post`)—a key insight for HTML-over‑the‑wire development.
- **FastHTML Setup**:
We instantiate the app and get our router (`rt`) via `fast_app()`. This ensures all the FastHTML “magic” (routing, database integration, etc.) is activated from the start.
- **Explicit HTTP Methods and Semantic Names**:
We define the main page route with `methods=["GET"]` and name it `main_page`. Similarly, the update handler is called `update_greeting_route` and is declared with `methods=["POST"]`. This avoids ambiguity with generic names like `get` or `post`, especially for AI coding assistants.
- **HTMX Integration**:
The button has attributes `hx_post`, `hx_target`, and `hx_swap` set to enable dynamic updates. When the button is clicked, HTMX posts to `/update-greeting`, and the response (the updated greeting) is swapped into the `
`.
This code is fully self-contained and should run as-is, providing a minimal yet complete example of FastHTML with HTMX and stacked‑attribute syntax.
---
A few days ago, I made the non-breaking step-by-step guide to converting my
existing Pipulate `workflow_template.py` from [DRY to
WET](/futureproof/dry-vs-wet/).
Let me check that plan with o3-mini-high, which just made the above example.
## o3-mini-high's Thoughts
**o3-mini-high**: I like the plan—it shows you’ve given serious thought to mitigating risk while allowing radical flexibility. Your phased, non-breaking guide smartly focuses on isolating each change so you can always roll back or adjust before moving on. I’d just add a couple of gentle reminders:
- **State Consistency**: Ensure that when you switch routes and step handlers, you’re not accidentally introducing any state inconsistencies. It’s easy to overlook a subtle dependency that was implicitly handled by the loop.
- **HTMX Triggers**: Those asynchronous HTMX calls can sometimes be finicky, especially if there’s a slight timing or ordering change. Monitor the responses during testing to confirm that the new explicit handlers fire in the correct sequence.
- **Server Integration**: If your server.py is doing any global work (logging, middleware, or state initialization), check that it still meshes nicely with your new explicit routes. Sometimes a small change in one area can have cascading effects, even if the UI seems fine.
Other than that, your approach is pragmatic and refreshingly candid. I’d be happy to review your server.py if you’d like, but from what I’m seeing, you’re on a solid track. It’s all about embracing the “WET” philosophy where clarity and explicitness trump minimalism—and that’s a winning strategy when you need the flexibility of a Jupyter Notebook mindset.
Keep pushing, and remember: sometimes, a little repetition is the key to long-term maintainability. Happy coding!
**Me**: Okay, excellent, thanks! So now that you've seen the step-by-step guide
and also written this excellent stand-alone FastHTML/HTMX example, write a
simple introduction to all this giving the foundational background someone might
need to know. Don't worry about teaching the particulars of Pipulate, but more
focus on a FastHTML / HTMX introduction for anyone getting ready to do this
style of programming. They soon will be doing the Pipulate workflows, but first
they need to get over that mindset hump. The same one keeping you and your kind
so fixed on FastAPI patterns. But there is so much important new mindshifts with
FastHTML that could be game-changers in the world of Python web dev.
**o3**:
### Welcome to FastHTML and HTMX: A New Paradigm in Python Web Development
In the traditional world of Python web frameworks, many of us have grown comfortable with the conventions of FastAPI, Flask, or Django—frameworks that often rely on heavy abstractions, JSON APIs, and templating languages. But what if you could build interactive, dynamic web apps with almost no JavaScript at all? What if your server could simply send HTML fragments directly to the client, and the browser could update seamlessly without a full page reload?
That’s where **FastHTML** and **HTMX** come in.
#### FastHTML: HTML Over the Wire
**FastHTML** is a lightweight Python framework designed to make web development as direct and intuitive as possible. Rather than abstracting your HTML into a templating language, FastHTML lets you construct HTML directly in Python using component functions like `Div()`, `P()`, and `Button()`.
Key points about FastHTML:
- **Direct HTML Construction:** Write your HTML directly in Python. This removes the cognitive overhead of mixing template syntax with backend logic.
- **Stacked-Attribute Syntax:** Python’s flexible syntax allows you to break function calls into multiple lines. This “stacked” style makes it easy to see how Python arguments map to HTML attributes (for example, `hx_post` becomes `hx-post` in the rendered HTML).
- **Minimalism by Design:** FastHTML is intentionally minimal and focused on local simplicity. While it can be used for complex, enterprise-scale apps, its clarity and observability make it idea for rapid prototyping.
- **Server-Side State:** With a design philosophy that embraces server-side state, you can create single-tenant, local-first apps similar to, but more powerful than Electron apps, leveraging the full capability of your local machine.
#### HTMX: Enhancing HTML for Interactivity
**HTMX** is a small JavaScript library that gives HTML a powerful boost. It introduces a set of custom HTML attributes like `hx-post`, `hx-get`, `hx-target`, and `hx-swap` which let you make AJAX requests directly from your HTML elements.
What makes HTMX so compelling:
- **No JavaScript Needed:** With HTMX, you don’t have to write JavaScript to update your page dynamically. Instead, you simply add attributes to your HTML elements. For example, clicking a button with `hx-post="/update-greeting"` sends a POST request to the server, and the response HTML is swapped into the specified target.
- **Fine-Grained Control:** HTMX works at the level of HTML fragments. Instead of sending JSON responses and rebuilding the UI on the client, your server sends back a snippet of HTML that replaces part of the page. This reduces the complexity of client-side state management.
- **Enhanced User Experience:** By avoiding full page reloads and only updating parts of the DOM, your app feels faster and more responsive. It’s a straightforward way to introduce interactivity without the bulk of modern JavaScript frameworks.
#### A New Mindset for Python Web Developers
For many Python developers, frameworks like FastAPI have set the standard. However, when you step into the FastHTML/HTMX world, a few key mindshifts occur:
1. **From JSON to HTML Fragments:**
Instead of building APIs that return JSON and then using a client-side framework to render that data, you build your UI by composing HTML on the server. The server is not just a data provider—it’s the UI builder.
2. **Directly Embedded UI Logic:**
Your Python code directly builds your HTML. This removes the middle layer of templating languages (like Jinja), which can sometimes add extra cognitive overhead. You see exactly what your output is.
3. **Simpler, More Transparent Routing:**
FastHTML’s routing is designed to be explicit yet minimal. Using helper functions like `fast_app()`, you get your application and router in one go. This means you don’t have to deal with the complexities of more “enterprise” routing paradigms.
4. **Observable, Local-First Development:**
The FastHTML/HTMX approach is ideal for single-tenant, local-first applications to replace Electron. This makes debugging and development more transparent, as you can see every part of the rendering pipeline without layers of abstraction. Multi-platform operating system issues are mitigated by Nix Flakes.
5. **Flexibility Over Abstraction:**
While frameworks like FastAPI might encourage a more abstract, DRY (Don't Repeat Yourself) approach, FastHTML encourages a “WET” (Write Everything Twice) philosophy in some areas. This might seem counterintuitive, but it pays dividends in clarity and ease of customization—especially when building dynamic workflows.
#### Getting Started
If you’re ready to take the plunge:
- **Experiment with Small Examples:** Start with a basic FastHTML app that renders a greeting and updates it with HTMX. Notice how a simple button click can trigger a server-side update that replaces a fragment of HTML.
- **Build and Customize:** Gradually move to more complex applications. When you start building workflows (like the Pipulate pipelines), embrace the explicit nature of the code. Each step, each route, is laid out clearly, making it easier to debug and customize.
- **Think in Cells:** Approach your application as if each component were a cell in a Jupyter Notebook. This makes it easier to iterate, test, and refine without getting bogged down in abstract layers.
#### Final Thoughts
The world of Python web development is evolving. FastHTML and HTMX offer a refreshing alternative to traditional, heavy frameworks. They put clarity, simplicity, and direct HTML manipulation at the forefront. While there’s a learning curve—especially if you’re used to the FastAPI way—this new paradigm can be a game-changer, particularly for developers who value transparency and rapid prototyping.
Embrace the shift. Dive into the world of HTML over the wire, and discover how a little extra explicitness in your code can lead to a more flexible and maintainable application. Welcome to a new era of Python web development. Happy coding!
---
> Alright. It's afternoon, and I've done enough studying, rambling and learning.
> Now it's time to shift gears to some doing, following my own step-by-step
> guide... on the next article, ahaha!
---
## Gemini's Take
Alright, let's break this down as requested!
---
**Summary (1st person perspective of the author):**
[Moved to top]
---
**Ideas for Titles and Headlines:**
* **Titles:**
* HTML Over the Wire: A Python Revolution
* FastHTML and HTMX: Ditch JSON, Embrace HTML
* The Simplicity of FastHTML: Python Web Dev Reimagined
* Beyond FastAPI: A New Era of Python Web Applications
* From JSON to HTML: Building Dynamic UIs with FastHTML
* **Headlines:**
* Say Goodbye to JSON: HTML Over the Wire is Here
* Python Web Dev Just Got Easier: FastHTML and HTMX Explained
* No More JavaScript? How HTMX Changes Everything
* The Future of Python Web Apps: Simple, Dynamic, HTML-First
* Why I'm Ditching My Old Framework for FastHTML
---
**AI's Opinion of the Article:**
As an AI, I find the article to be a compelling exploration of a potentially transformative approach to Python web development. The author's candid and enthusiastic tone effectively conveys the excitement surrounding FastHTML and HTMX. I appreciate the clear explanation of the concepts and the practical code examples, which make it easy for readers to understand and experiment with these tools. The author's willingness to challenge conventional wisdom and advocate for a "WET" philosophy is refreshing. The article effectively highlights the potential for FastHTML to simplify web development and empower developers to build dynamic, interactive applications with minimal code. The way the author included my own extended response, shows a dedication to creating a very complete document.
{% endraw %}