top of page
Anton Pirker

I Tried FastHTML. It's Weird. And Wonderful.

I have been a web developer for two decades now. When the complexity on the frontend exploded I started only to do backend development. For a very long time, I was doing Django and recently some FastAPI and a lot of plain Python.


I tried a couple of times to acquaint myself with Angular, React, and Vue, but all this compiling, processing, and bundling of frontend code was too cumbersome. I do not think this is the way that web applications are supposed to be built.


A couple of weeks ago FastHTML was released and because it uses Starlette and Uvicorn under the hood (which is also the foundation of FastAPI) and also has HTMX baked in I wanted to give it a try. I created a straightforward HTML page that has a couple of frontend components on it that load data from an HTTP API. It is a simple frontend to the performance data collected by Sentry, so I called it Zentry.


The nice thing about FastHTML is that you define routes and those routes return chunks of HTML instead of JSON. There is no templating for creating the HTML like it is done in other Python web frameworks. You use Python functions that are named like the HTML tags, to compose your chunks of HTML. I needed some time to get used to this, but in the end, it felt pretty natural.


What is Weird


Because FastHTML is a young framework, the documentation is not the best. If you click "Read docs" on the main FastHTML website, you get to https://docs.fastht.ml/. This page has a bunch of examples and code snippets that you can study to find out how things are done. On the docs page, you have a "Learn" link that brings you to https://about.fastht.ml/. On this page, the vision and the concepts are explained, with some code snippets. The docs and about page look almost the same. For me, this was very confusing. I read all those pages not in one go but jumped around. During the development of my page, I remembered that I saw the solution to a problem I was having. But I could not remember if I saw this in "FastHTML by Example", "Web Dev Quickstart", and "BYO Blog" on the docs page, or the "Technology", "Components" or "Foundations" pages on about website. Or somewhere else on one of those pages. For me, the documentation is very confusing. Also, the code formatting of the code snippets and the examples got me the creeps, because it is not formatted like any Python code I have seen before.


If I could have a wish, I would wish for all the code snippets and examples to be formatted with black and for there is one page containing all the documentation with sections like "Getting Started", "Routes", "Rendering HTML", "Assets", "Examples", and so on.


Another weird fact: The core of FastHTML is written in Jupyter notebooks. A thing that I have never seen before. When I could not figure out how to do something by reading the docs, I wanted to read the source. I had a hard time finding the code I was looking for because most of the code is generated from Jupyter notebooks.


What is Wonderful


After I figured out how to add custom styling, how to compose HTML and create interactive frontend components it was a bliss to use. I liked defining the HTML in Python. I did not have to touch any frontend code to make my frontend components show a "loading" state when first rendered on the server and then fetching data on page load and when the data was retrieved update the frontend to show the data. I loved it, it was so much easier than using a frontend framework. Here is an example of one of my frontend components.


The best thing, you just have to call "python app.py" to run it in development and/or production. Deploying the app to platform.sh was also straightforward.


Conclusion


All in all, I am very happy with the app I developed. The app's structure is good and easy to understand. It is also easy to extend and refactor, I think it scales.


I can see myself using FastHTML for future projects.


If you also want to try FastHTML have a look at Zentry. It is a small project but showcases a lot of the nice features of FastHTML.


If you are a Sentry user and want to have a one-page overview of how your Sentry instrumented web app (frontend and backend) is doing, have also a look at Zentry. (It's open source, so you can also improve it, if you like)

Recent Posts

See All

How to Refactor and Not Break Things

I am one of the maintainers of the Sentry Python SDK. In the SDK, we completed a huge refactoring, and I want to write down how we pulled...

bottom of page