{"id":13780365,"url":"https://github.com/spookylukey/django-htmx-patterns","last_synced_at":"2025-04-12T16:35:11.660Z","repository":{"id":58500652,"uuid":"532074755","full_name":"spookylukey/django-htmx-patterns","owner":"spookylukey","description":"Pattern repository for Django and htmx with full example code","archived":false,"fork":false,"pushed_at":"2024-01-11T15:10:39.000Z","size":19273,"stargazers_count":984,"open_issues_count":2,"forks_count":40,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-04-03T16:14:26.092Z","etag":null,"topics":["django","html","htmx","hypermedia","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spookylukey.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.rst","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-09-02T20:48:38.000Z","updated_at":"2025-03-31T20:50:11.000Z","dependencies_parsed_at":"2024-01-15T23:25:11.564Z","dependency_job_id":"52ebf9bd-281c-4465-9c10-55abbf75ce2d","html_url":"https://github.com/spookylukey/django-htmx-patterns","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/spookylukey%2Fdjango-htmx-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spookylukey%2Fdjango-htmx-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spookylukey%2Fdjango-htmx-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spookylukey%2Fdjango-htmx-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spookylukey","download_url":"https://codeload.github.com/spookylukey/django-htmx-patterns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597075,"owners_count":21130806,"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":["django","html","htmx","hypermedia","web"],"created_at":"2024-08-03T18:01:14.947Z","updated_at":"2025-04-12T16:35:11.623Z","avatar_url":"https://github.com/spookylukey.png","language":"JavaScript","readme":"Django + htmx patterns\n======================\n\nThis repo is a rough-and-ready compilation of the patterns I’m using and\ndeveloping when writing `Django \u003chttps://www.djangoproject.com/\u003e`_ projects that\nuse `htmx \u003chttps://htmx.org/\u003e`_, with complete example code.\n\nThe docs are intended to be viewed on GitHub:\nhttps://github.com/spookylukey/django-htmx-patterns/ and the code can be run\nlocally if needed.\n\nMy aims are to document and share:\n\n1. The basic patterns and control flow needed\n2. Some enhancements we can make with a few utilities\n\nThe code presented depends only on Django and htmx, unless otherwise noted. I\nwon’t be packaging it up as a library. It is instead being released into the\npublic domain, and you are encouraged to copy-paste it for your own needs. (See\nthe “Approach” docs for why).\n\nThere are some Django packages that provide shortcuts for some of the things\nmentioned here, such as `django-htmx\n\u003chttps://github.com/adamchainz/django-htmx\u003e`_, but I won’t be using any of them\nfor the sake of clarity.\n\n\nContents\n--------\n\n* `Approach \u003c./approach.rst\u003e`_\n* `Base template \u003c./base_template.rst\u003e`_\n* `Headers \u003c./headers.rst\u003e`_\n* `Post requests \u003c./posts.rst\u003e`_\n* `Partials using separate templates \u003c./separate_partials.rst\u003e`_\n* `Separate partials with a single view \u003c./separate_partials_single_view.rst\u003e`_\n* `Inline partials \u003c./inline_partials.rst\u003e`_\n* `Single view with actions combined \u003c./actions.rst\u003e`_\n* `View restart \u003c./view_restart.rst\u003e`_\n* `django-functest patterns \u003c./django_functest.rst\u003e`_\n* `Modal dialogs \u003c./modals.rst\u003e`_\n* `Form validation \u003c./form_validation.rst\u003e`_\n\nThis is a work in progress, I’ll try to keep it up to date. PRs welcome.\n\ntl;dr\n-----\n\nThe biggest contributions in this repo are:\n\n* `inline partials with block selection in the template\n  \u003chttps://github.com/spookylukey/django-htmx-patterns/blob/master/inline_partials.rst#block-selection-in-the-template\u003e`_.\n\n  This is a pattern which allows you to keep the parts of the page together for\n  great “locality of behaviour”, and avoid the view code having to know anything\n  about which template fragments/partials are being used. Template code changes\n  for htmx are usually a matter of wrapping some parts of a template in a Django\n  template ``block`` and adding standard htmx attributes. View code changes for\n  htmx are often just adding a single decorator on the view function:\n  ``@for_htmx(use_block_from_params=True)``.\n\n  This pattern makes a huge difference to htmx usability in Django.\n\n* `full example of field-by-field htmx form validation \u003c./form_validation.rst\u003e`_, while keeping Django’s Form abstraction and all its benefits.\n\n* `nice patterns for doing modals \u003c./modals.rst\u003e`_\n\n\nRequirements\n------------\n\n* `Django \u003chttps://www.djangoproject.com/\u003e`_\n* `htmx \u003chttps://htmx.org/\u003e`_ (see `Base template \u003c./base_template.rst\u003e`_ for suggested installation docs)\n* The nicest patterns here require `django-render-block \u003chttps://github.com/clokep/django-render-block\u003e`_::\n\n    pip install django-render-block\n\n\nMonsters\n--------\n\nMy example code includes sad and happy monsters that can be hugged or kicked to\nchange their state. Please note that I do not endorse the kicking of monsters,\nnor advise hugging them.\n\n\nCode folder\n-----------\n\nIn the `code folder \u003c./code/\u003e`_ is a demo app which has full working examples of\neverything in the docs.\n\nTo install locally, create and activate a virtualenv, and then do::\n\n  cd code\n  pip install -r requirements.txt\n  python manage.py migrate\n  python manage.py runserver\n\n\nFeedback\n--------\n\nYour feedback is very welcome! Star this repo if you like it, and please share\nideas on `discussions\n\u003chttps://github.com/spookylukey/django-htmx-patterns/discussions\u003e`_.\n\nLinks\n-----\n\nSome other good htmx resources:\n\n* `How to create a Django form (using HTMX) in 90 seconds 🐎 \u003chttps://www.photondesigner.com/articles/submit-async-django-form-with-htmx\u003e`_ - short, simple post (and video) showing how to start using HTMX with Django very quickly \n* `How to use htmx in Django \u003chttps://www.mattlayman.com/blog/2021/how-to-htmx-django/\u003e`_ - tutorial blog post\n* `django-htmx \u003chttps://github.com/adamchainz/django-htmx\u003e`_ - utility library with helpful docs\n* `django-htmx-fun \u003chttps://github.com/guettli/django-htmx-fun\u003e`_ - example application with Django/htmx\n* `django-siteajax \u003chttps://github.com/idlesign/django-siteajax\u003e`_ - has some similar ideas to this repo\n\nIf you liked this repo, you might also be helped by some of my other resources:\n\n* `django-functest \u003chttps://github.com/django-functest/django-functest\u003e`_\n* `Django Views — The Right Way\n  \u003chttps://spookylukey.github.io/django-views-the-right-way/\u003e`_\n","funding_links":[],"categories":["Design, Theory, and Patterns 🧠","JavaScript"],"sub_categories":["But Will it Work in Production?"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspookylukey%2Fdjango-htmx-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspookylukey%2Fdjango-htmx-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspookylukey%2Fdjango-htmx-patterns/lists"}