I created this app to help me track cash transactions that I can then export as a CSV file and then import into my PTA. It works well. It can work offline. I built it to be progressively enhanced. So, no JS needed but, if you don't mind JS being used, then it will have better features and even work offline, saving any transactions for when you are online again.
I created a little app that tracks the cash spending that I can export with a CSV file. You can host it yourself. I had no idea that my wife was using so much cash!
HTMX and related libs work just fine as offline apps. I've been doing it with my personal apps I make for myself for a long time.
Also, morphdom/idiomorph get you a long way even when you have highly interactive pages, especially if you have to hit the back end anyways. If you don't need to hit the back end then a front end lib is fine. But even then, the simpler pattern of hypermedia-driven applications can be better.
Here's an example offline-first hypermedia-driven soccer application. The match page is the most complex part of the application and I use Morphdom to just do a diff on the main section of the page. I find hypermedia-driven development to be super simple.
I find React to be really complex. What normally takes me just some HTML rendered from the back end and some interactivity on the front end can be done in just a few lines of code, but React takes 10s of lines of code for what I can write in a single line of code using vanilla js. The virtual dom causes it to make everything state. I always find it odd that people reach for that as their front end. I could understand something like Svelte, but even that is too complex for my needs. But I'm always writing CRUD apps, so there is some complexity but not that much, React just makes something that was simple, super complex.
Interesting read. I haven't quite finished it all. I haven't ever needed anything like that when writing web pages with HTMX, html-form (my own), nor htmz-be (another one I wrote based off of htmz but the back end decided where the HTML will go, similar to data-star and nomini). When I write code from the back end and target the front end I can use middleware to common updates.
Here's the most complex app I've made with it. The most complex part of the app is the match page. I just use morphdom for that part of the app and it makes it super easy, I just send the whole main part of the page back and let a dom diff happen.
This is a offline-first PWA app where I serve the back end from a service worker using JS template literals to stream HTML. This uses a variant of HTMZ to increase the interactivity of the app along with Morphdom for DOM diffing.
Mastro looks like what I do for my offline-first, rendered from Service Workers. I just compose html template string literals and stream them back to the front end. The lib I use for HTML is a bit more powerful though. It is a very elegant way to program.
I added one site that is mostly a static recipe site that my family uses. It includes VanJS to pick random recipes and you can save them as you go along to pick what you are planning for dinner that night. It also has a filter to find the recipes by name and a filter to filter by type. Mainly for personal use but shows what you can do with not a whole lot of code.[1]
I also added a question for my soccer app. Cloudflare doesn't know how to work with service worker-driven applications :-) This one puts the back end in the service worker and uses HTMZ-BE to make it feel like you are using an app. So, basically, a front end MPA with nice interactivity. Super light weight for what it does and easy to use.[2]
With highly dynamic page where you would normally start using a front end lib, Idiomorph makes it so you can stick with the hypermedia approach instead.
And here's an MPA that caches the pages and save the updates for later when you are back online. So, you can navigate around and see the old data even if you are offline: https://github.com/jon49/cash
No need for HTMX, HTMZ can get you most of the way there if it is going from simple MPA to slightly more complicated. I used a variation of HTMZ to make a offline-first soccer app I use for myself. I thought I would need to use a front end for the match play page, but, nope, I used Morphdom with HTMZ and I was able to keep the simplicity of templating and a back end.
My intent wasn't to say it is a Datastar replacement. Just to say that I used their idea of deciding where to place the returned HTML is based on the back end driving the decision, rather than the front end.
Datastar's model of doing it this way really simplifies the front end even more compared to HTMX's model of having the elements on the front end decide where to put the returned HTML.
When HTMZ was announced I thought it was a neat little script. But I didn't understand how this would be practical in the real world. This little "extension" makes it have the full power of hypermedia development but targeted from the back end (similar to data-star). The repository has a link to see the full interactive examples of how this works.
The article stated that he no longer needs eventing to update other parts of the page, he can send down everything at once. So, I guess that is much less complex. Granted, eventing and pulling something down later could be a better approach depending on the circumstance.
https://github.com/jon49/cash