Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node.
Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a tag.
Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler.
I've been using htmx since the intercooler days, but I'm of the opinion that just using Next.js and treating React like simple HTML is much easier for starters.
Or Alpine, but not htmx. Learning all those attributes (30, not counting the HTML headers and the JS API and the CSS classes, and events like htmx:historyCacheMissError) is not as simple as some in HN make it out to be. Just look at the most basic example in the top here: https://htmx.org/docs/. Meanwhile Alpine is read much easier, and has half the amount of attributes (15): https://alpinejs.dev/. Also look at the interactive component example from React: https://reactjs.org/tutorial/tutorial.html#making-an-interac.... It looks easier if you don't hate JS.
Of course, I respect that some avoid JS with passion, but I don't buy that it's simpler. It's juss less javascript-y.
As a non-js developer I found Alpine lacking. In the examples they use something like await axios get to get new content. I have no idea what any of those mean or why they have to there in that order with that syntax.
HTMX makes this incredibly simple:
Get Some HTMLIt really looks like the x-html attribute you're complaining about is just using plain old javascript. It takes a statement that resolves to a string, and renders that.
The statement they provided happens to be pretty terrible for docs (I would have just used the built in fetch api, instead of the axios networking library - https://github.com/axios/axios), but it's plain old js regardless.
Your example is some custom fucking DSL that I have NO idea what it's doing. When does it run? how does it handle errors? What is the base url? What happens to the original text? How does it auth? What if I needed to post, or put, or delete? It's an entire fucking language I have to learn on top of the actual css/html/js knowledge required to understand this. In almost all cases, you're better off just learning "plain old javascript" since that skillset travels with you everywhere.
basically: DO NOT MAKE ME LEARN YOUR FUCKING DSL. It's wasted time and effort for me, and learning it provides absolutely zero benefits outside of your library. Further - it will fucking leak, and then you're right back at writing plain old js again, but now you have to understand the intimate details of the library implementing the dsl to tweak the right spots.
Even alpine turns me off a bit here (it's still a dsl, even if most of it reverts to plain old js) - but at least they're incredibly up front about the total time investment to learn the dsl (15 attrs, 6 props, 2 methods). HTMX is like 5 times the size (https://htmx.org/reference/), so I assume roughly 20 times the effort to learn the DSL.