This repository demonstrates how to build modern, dynamic user interfaces using HTMX with a FastAPI backend in Python 3.12.6.
Instead of relying on JSON APIs and heavy JavaScript, this project follows the Hypermedia-Driven Application (HDA) architecture: the backend sends HTML fragments directly, and HTMX handles DOM updates seamlessly.
- Backend: FastAPI (Python) and Jinja2 as template engine
- Frontend: HTMX with plain HTML, Pico CSS and some _hyperscript
- Testing: Playwright for end-to-end tests
- Data Source: Random User API
All frontend dependencies are loaded directly from index.html via <script> tags.
Install dependencies and start the development server:
python -m venv ./venv
source ./venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload
App is reachable under: http://127.0.0.1:8000/
Swagger: http://127.0.0.1:8000/docs
Redoc: http://127.0.0.1:8000/redoc
For tests, user data is loaded from user_data.json instead of being fetched from randomuser.me.
All tests:
pytest tests/*.py -v
Run a specific test:
pytest tests/test_htmx_form.py -v
pytest tests/test_htmx_scrolling.py -v
pytest tests/test_htmx_stream.py -v
pytest tests/test_htmx_table.py -v
All examples fetch user data from https://randomuser.me/api/.
Dynamically load and display user data in a responsive table.
Some _hyperscript is used to handle HTML form validation. Sweetalert2 is used to confirm a deletion.
Submit and validate forms without page reloads.
Some JavaScript is used to handle HTML form validation.
Real-time updates via HTMX streams.
Good way to get data pushed from the server for interaction websockets needs to be used.
Load additional content as the user scrolls.
A typincal thing while consuming content to scroll over endless entries.
Star this repo if you found it useful. Use the github issue tracker to give feedback on this repo.