{"id":13770982,"url":"https://github.com/guettli/django-htmx-fun","last_synced_at":"2026-02-27T09:10:40.208Z","repository":{"id":47725631,"uuid":"333858891","full_name":"guettli/django-htmx-fun","owner":"guettli","description":"A small Django application to advertise the fun htmx can bring you ","archived":false,"fork":false,"pushed_at":"2021-11-22T08:17:13.000Z","size":304,"stargazers_count":187,"open_issues_count":0,"forks_count":14,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-12-16T23:07:42.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guettli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-28T18:49:38.000Z","updated_at":"2024-12-04T22:11:23.000Z","dependencies_parsed_at":"2022-07-22T02:18:05.410Z","dependency_job_id":null,"html_url":"https://github.com/guettli/django-htmx-fun","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guettli%2Fdjango-htmx-fun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guettli%2Fdjango-htmx-fun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guettli%2Fdjango-htmx-fun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guettli%2Fdjango-htmx-fun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guettli","download_url":"https://codeload.github.com/guettli/django-htmx-fun/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230359943,"owners_count":18214158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:00:45.897Z","updated_at":"2026-02-27T09:10:35.189Z","avatar_url":"https://github.com/guettli.png","language":"Python","funding_links":[],"categories":["Examples by Back-end","Python"],"sub_categories":["Python-based (Django, FastAPI, Flask)"],"readme":"\n# django-htmx-fun\n\nA small Django application to advertise the fun [htmx](//htmx.org) can bring you.\n\nIt implements a Single-Page-Application for writing a diary.\n\nThe entries in the diary database get lazy loaded (endless scrolling) via [hx-trigger=\"revealed\"](https://htmx.org/attributes/hx-trigger/)\n\n# Why I love htmx?\n\nIf you look into the past then one thing is clear: stateless has won. Nobody starts a new project with [Corba](https://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture)\nthese days. Stateless http is the winner.\n\nI don't understand why JavaScript based frontend frameworks seem to be the only way for new projects.\n\nI want the client/browser to be SSS (simple, stupid and stateless).\n\nI need to validate my data on the server anyway. So why should I validate them on the client?\n\nThe Django Forms library has all you need to write database focused applications.\n\nSending HTML fragments over the wire keeps my application simple.\n\nThere is just one thing which is outdated (although it is still perfectly fine). The need\nfor a full page refresh after submitting a form.\n\nI want html pages with several small forms and I want to load and submit each of them \nindividually. This does not mean I want to write a Single-Page-Application. There\nare more colors than black and white. \n\nFor more about htmx see the homepage: [htmx.org](//htmx.org)\n\n[HTMX: Frontend Revolution (Slides from DjangoCon 2021)](https://docs.google.com/presentation/d/12dgaBnUgl4cmEkiOhUJL5hsbGQ6hB5sslDuozmBjVUA/edit?usp=sharing)\n\nYoutube video of the Talk [DjangoCon US 2021: HTMX, Frontend Revolution](https://www.youtube.com/watch?v=z0yPTv15Fjk)\n\n## Install\n\nIf you want to install my small htmx demo application:\n\n```\npython3 -m venv django-htmx-fun-env\ncd django-htmx-fun-env\n. bin/activate\npip install -e git+https://github.com/guettli/django-htmx-fun.git#egg=django-htmx-fun\n```\n\nThe source code is now in src/django-htmx-fun/\n\n## Run Database Migrations\n\n```\nmanage.py migrate\n```\n\n## Start Webserver\n```\nmanage.py runserver\n```\n\nDiary: http://127.0.0.1:8000/\n\n## Admin\n```\nmanage.py createsuperuser\n\n```\nAdmin: http://127.0.0.1:8000/admin\n\n## No need for the POST/Redirect/GET pattern\n\nIf you are used to django's form handling, then you are used to the [POST/Redirect/GET Pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get). This means after the client submitted a valid form, the server response has the http status 302 with a new location URL.\n\nThis is not needed if you submit a form via htmx and you just want to update one part of the whole page.\n\nI use this pattern now:\n\nCase 1: The http POST was successful, and data was changed. The server returns the status code 201 \"Created\". I use this even if data was changed, and not \"created\". I use this and not the usual 200 to simplify testing. I never ever want to confuse the http status of a successful htmx POST with the http status of an invalid traditional django http POST. The response contains the new HTML. No need for a redirect.\n\nCase 2: The http POST was not successful, since the data in the form was not valid. Then my server code returns 422. \n\nRelated question: [Which http status codes to use when processing http post?](https://stackoverflow.com/q/69773241/633961)\n\n## Full Page (aka \"client-side\") Redirect\n\nIf you use htmx, then most http responses will contains html fragments which will get swapped into the current page.\n\nBut sometimes you want to do a traditional full page redirect. In the htmx docs it is called \"client-side\" redirect.\n\nThen you need return a http response which has the http header \"HX-Redirect\" set to the URL of the new location. Docs: [Response Headers](https://htmx.org/docs/#response-headers)\n\nA common mistake is the set the status code if this response to 302. But this will trigger a redirect inside htmx.\n\nHere is some code to do a full page redirect with Django: [hx-target: swap html vs full page reload](https://stackoverflow.com/a/65569741/633961)\n\n## Naming Pattern\n\nHere is my personal naming pattern, which helps me to read the source more easily\n\n**_page():** \n\nFunction based view. \n\n`foo_page(request, ...)`. \n\nReturns a HttpResponse with a full page. \n\nURL: `/foo`\n\nThis servers only http GET. Updates (http POST) go to _hxpost URLs.\n\n---\n\n**_hx():**\n\nFunction based view.\n\n`foo_hx(request, ...)`\n\nThis method should be called via HTTP-GET. Returns a HttpResponse which only contains a HTML fragment. \n\nURL: `/foo_hx`\n\n---\n\n**_hxpost():**\n\nFunction based view.\n\n`foo_hxpost(request, ...)`\n\nThis methods should be called via HTTP-POST. Returns a HttpResponse which only \ncontains a HTML fragment. \n\nURL: `/foo_hxpost`\n\nIt makes sense to use the [require_POST decorator](https://docs.djangoproject.com/en/dev/topics/http/decorators/#django.views.decorators.http.require_POST),if you have concerns that a GET request (where request.POST is empty) could accidently change data.\n\n---\n\n**_json():**\n\nFunction based view.\n\n`foo_json(request, ...)`\n\nThis method returns a [JSONResponse](https://docs.djangoproject.com/en/dev/ref/request-response/#jsonresponse-objects).\n\nURL: `/foo_json`\n\nTODO: I am not happy with this yet, since you can't distinguish between a method\nwhich returns a JSON data (dictionary), JSON string or JSONResponse.\n\n---\n\n**_html():**\n\nPython method which returns a HTML SafeString. \n\nUsually created via [format_html()](https://docs.djangoproject.com/en/dev/ref/utils/#django.utils.html.format_html).\n\n## Flat URL Namespace\n\nAbove naming pattern makes it very use to get to the corresponding code. \n\nImagine you get a message from tool monitoring your servers. There is an exception at URL \"/sunshine/123\",\nthen I know the name of the method which handles this URL. The method is \"sunshine_page()\".\n\nIf you need several pages for a model, then you will not use \"/sunshine/foo\" and \"/sunshine/bar\", but instead \"/sunshine_foo\" and \"/sunshine_bar\".\n\n## Opinionated Best Practices\n\nI switched from Django class-based-views (CBV) to function-based-views (FBV). This simplifies things. \nOne URL corresponds to one Python method. If an action requires two HTTP verbs (GET and POST), then I use **two URLs**. Posts\nalways go to hx-methods, not to URLs returning full pages.\n\nI like it conditionless. I try to avoid to have too many \"if\" and \"else\".\n\nI avoid to use `if request.method == 'POST'`. This means I don't handle different http verbs in one function based view. A function based view handles either GET xor a POST. URLs are cheap I create two URLs if I need a a readonly view and a view which does something.\n\nI only use the http verbs GET and POST, although htmx can do http PUT, http PATCH, http DELETE, ...\n\nI don't use the special http headers which get added by htmx. I avoid this (pseudo code): \"if request is a htmx request, then ...\".\nInstead I create two endpoints: One which returns a full page, one which returns a fragment.\n\nGoodbye formsets. I use several `\u003cform\u003e` tags in one page. This means I hardly use formsets. Some for the \"prefix\" of forms: Since\nI don't put several Django form instances into one `\u003cform\u003e` tag, I don't need the prefix any more.\n\n\n## Screenshot\n\n![diary-django-htmx](docs/diary-django-htmx.png)\n\nIn devtools you can see the lazy loading of the endless scrolling\n\n... All this is possible without writing a single line of JavaScript :-)\n\n\n## Pull Requests are welcome\n\nYou have an idea how to improve this example? Great! Just do it, provide a pull request and I will merge it.\n\n## Related\n\n* [Güttli Django Tips](https://github.com/guettli/django-tips)\n* [Güttli's opinionated Python Tips](https://github.com/guettli/python-tips)\n* [Güttli working-out-loud](https://github.com/guettli/wol)\n* [Güttli's Programming Guidelines (long)](https://github.com/guettli/programming-guidelines)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguettli%2Fdjango-htmx-fun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguettli%2Fdjango-htmx-fun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguettli%2Fdjango-htmx-fun/lists"}