ah, but htmx gets a star, and other frameworks don't I see no flaw in this logic check mate

:p don't get me wrong I think htmx is fantastic but if I want like pub sub style interactions I'm reaching for a tool that is extendable in that direction, with primary support from the framework

🙂 I'm just kidding

Yeah I know haha

Just clarifying cause I really like htmx

I appreciate all the work and enthusiasm that both you and @User are putting in for htmx

and if there are some checklists that have stars next to htmx, I'm pretty OK w/ that

I'm interviewing for a new job this week and part of the interview is I just demo something. I'm definitely demoing htmx. It's gonna be fun.

awesome! Good luck!

Wishing you good luck 👍

Thanks :) and I hope you don't take my feedback as negative, just some constructive criticism

No worries, I will definitely take it in the right direction, besides it is always good to have different perspectives.

we few we few, we happy few, we band of brothers just trying to write web apps without a metric ton of javascript...

Dear all, i found htmx official document is quite bad, the code snippet is not enough to build a working demo, you have to guess and try how it works and how to add these

hx-*

parameters and values of

hx-*

.

Swapping content for

tbody

doesn't seem to work properly if it comes with an out of band swap. This is my response

html
<span id="btnClear" hx-swap-oob="true"><a class="btn btn-link" href="/">Clear Filters</a></span>
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>

The

tr

and

td

tags are stripped before swapping

Have you taken a look at the examples here https://htmx.org/examples/ What kind of working demo you are looking for? There are many working demos here also https://github.com/rajasegar/awesome-htmx#examples

Hey guys. I recently discovered htmx. Not trying to compare libraries here, but I am very interested to find out if anyone here has used both htmx/hyperscript and alpine.js (not in the same project) and what the views are in your experience between the two?

I have not used alpine but looking at t it from an high level it just seems like a subset of htmx/hyperscript, it only cares about interactivity, but htmx let you you do more like ajax, web sockets, sse and more

for me htmx is "html fragements over the wire". And Alpine.js is a bit like Vue but without virtual DOM. I like the stateless approach which I get from htmx.

https://github.com/microsoft/playwright/issues/5888#issuecomment-809799956 A developer of Playwright says (while looking at htmx code): > If a framework uses lazy hydration, it needs to enable controls once after the hydration is complete. Otherwise, clicking the buttons when the page is loaded over slow 3G does not work. In that case human is too fast, like Playwright is too fast on broadband. I don't know the details, but maybe it is good hint why I up to now need to add time.sleep(...) in my automated e2e tests. It would be cool if the manual sleep is not needed.

not all bad comments! Better than htmx usually does on /r/javascript

@User is probably the expert here. htmx is focused on communicating w/ the server via HTML enhancements, whereas Alpine is more client-side focused. Hyperscript is a more direct competitor w/ Alpine, but is more focused on being a general replacement for jQuery and, ultimately, javascript. htmx and Alpine pair well together if you want to go that route.

Hi there, welcome to the htmx discord. There are examples available on the main website: https://htmx.org/examples/ which show you how to implement many common UX patterns. The documentation itself is a bit more general and assumes you know how regular HTML works and can understand how htmx is extending that. Of course, we are always happy to accept proposals for improvements. And @User is doing yeomans work on putting together a huge number of examples here: https://github.com/rajasegar/awesome-htmx#examples

I am in the process of incorporating htmx and Alpine to some products. I am pairing it with Alpine for now because hyperscript is still evolving, but wouldn't mind switching to hyperscript later on once it allows triggering an event from the server just by changing an html data attribute 🙂 Initially I was going to go all in on Alpine, but that would have required writing more javascript and javascript templates, or implementing my own version of htmx with Alpine. So I am using htmx to write less javascript, and Alpine for modals, notifications, dropdowns, etc.

you can trigger events from the server by setting response headers though, seems like a cleaner solution.

This works fantastically, btw. Im using it to close modals and forward to the next page, and it’s beautiful.

can you show that?

Yeah. One sec.

Here's the HTML shell for my modals:

html
<div id="modal">
    <div class="modal-underlay" _="on click trigger closeModal"></div>
    <div class="modal-content">
        <h3>{{.Label}}</h3>
        <form hx-post="{{.URL}}" hx-swap="beforeend">
            {{ .RenderForm }}
            <input type="submit" class="button primary" value="Save Changes">
            <span class="button"_="on click trigger closeModal">Cancel</span>
        </form>
    </div>
</div>

And here's the hyperscript that handles the

closeModal

event:

hyperscript
on closeModal(event) 
    add .closing to #modal 

    if (not (no event.detail.nextPage))
        set window.location to event.detail.nextPage
    end

    wait for animationend
    remove #modal
end

When the user clicks on the underlay, or the "cancel" button, then the "closeModal" event is fired and the ".closing" animation begins. If the user clicks the "submit" button then the form goes to the server, which updates the database. It responds with an empty page with a header like this:

HX-Trigger:{"closeModal":{"nextPage":"/next-page-url"}}

which activates the part of the hyperscript that sends the user to a new page location.