django-htmx VS shoelace-css

If you don't already, you should use django-htmx. This will allow you to check if the request was made with HTMX. You can then do something like this:

To make things easier, install the django-htmx package. Then, in your Page model's serve(), you can do things like if request.htmx: and return an HTML snippet instead of the full page in that case.

The great thing about HTMX is it fits really nicely with templated server-rendered frameworks like Django.

You can have a page with a list of items. The page is one template, and it includes a sub-template which is just the

items. Then you have a separate view for "get list fragment" which just returns the updated/sorted/filtered

. If you toggle the ordering, or filter the list, HTMX will automatically call the fragment renderer and replace just the

items, without reloading the page.

See this example: https://github.com/adamchainz/django-htmx/blob/8054f049f53f0...

This approach solves the common interactivity use-cases requiring JS in a server-rendered app, without having to write any JS, and without having to build a REST API. Instead you just render HTML, which your framework is excellent at.

If you use django-htmx, it's pretty simple to get the "this HTTP request came from HTMX" flag and branch accordingly in your view. The docs give a simple example of the logic here:

https://django-htmx.readthedocs.io/en/latest/middleware.html...

The examples give a fleshed-out version: https://github.com/adamchainz/django-htmx/blob/main/example/...

Though that's very slightly different than how I described it above, but it's basically the same idea; in this case you commonize the `main` block between the two contexts.

HTMX has a HX-Trigger response header that enables you to trigger events in the browser that Javascript code can listen for. Assuming you already have Django-HTMX library set up, you could write a middleware like this:

Nice. I've written some less complete, less consistent variant of this a couple times now. That alone may be worth taking the dependency.

Full URL for django-htmx: https://github.com/adamchainz/django-htmx (creator here)

I think it's fair to clarify that Adam Johnson (aka adamchainz on Reddit and GitHub) didn't create HTMX but did write the django-htmx app to make it easier to use HTMX in Django.

django-htmx also comes with it's own version of HttpResponseHtmxRedirect (called HttpResponseClientRedirect).

HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).

Hello HN,

I'm releasing Hyperdiv (https://hyperdiv.io), a framework for rapidly developing reactive browser UIs in Python, with immediate-mode syntax and using Shoelace (https://shoelace.style) as its built-in component system.

This short coding video will give you a good idea of what it is: https://www.youtube.com/watch?v=4XJKfxaqvGE

I wrote a brief article about the motivation and approach: https://hyperdiv.io/intro.html

Hyperdiv doesn't aim to compete with serious full-stack frameworks. The core aim was to make it easy and fast to prototype apps and build UI-based tools. I was originally motivated by internal tools at work -- feeling the need to quickly put together UI-based tools to share with both technical and non-technical coworkers, without having to stand up and maintain a full internal stack.

This is my first major open source release. I really appreciate your feedback and support. - Marius

For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.

Here's what this looks like - note that I'm using Shoelace components for styling purposes.

There are lots of open-source design systems built with Lit. Shoelace is a popular component set that you might check out: https://github.com/shoelace-style/shoelace There are many others...

Would it help if we listed more open source projects on our site?

Because of our focus on components and the fact that you really can use just about any libraries and scaffolding for apps, we don't really have an app starter kit, but it's something we've talked about.

I'm really excited about all this, and it makes me have some faith in the web again. I think that Lit is a step in the right direction especially the ability to do SSR / SSG and hydrate a web page. Hopefully 🤞 Shoelace can get SSR running, which is currently one hurdle, but I think it is achievable.