<!-- Some kind of inline DSL in an attribute? Check -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:#another-div:top">
    Get Some Content
  </div>


  <!-- Some kind of inline DSL that is sorta kinda JS? Check -->
  <div hx-get="/clicked" hx-trigger="click[checkGlobalState()]">Control Click Me</div>

  <!-- Some kind of inline DSL that is marked as Javascript and with magic values passed in? Check -->
  <div hx-get="/example" hx-trigger="keyup" hx-vals='js:{lastKey: event.key}'>
    <input type="text" />
  </div>


  <!-- Is it Javascript? Jinx, it's custom DSL  -->
  <button hx-get="/info" hx-on::before-request="alert('Making a request!')">
    Get Info!
  </button>
  <button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                              htmx:afterRequest: alert('Done making a request!')">
    Get Info!
  </button>

we are tentatively working on a proposal with the chrome team that takes the most important concepts of htmx and integrates them into HTML using more standard attributes. Alex Petros, a core htmx dev, gave a talk at Big Sky Dev Con on this idea here:

https://www.youtube.com/watch?v=inRB6ull5WQ

this will obviously be a much longer and more difficult process, but hopefully it will give HTML enough oomph that htmx will often be unnecessary

all of that doesn't change the fact that the code above is hyperscript, not htmx

* use on* html attributes to delegate events to a universal event handler

* event handler pulls out the form attribute (if set), then pulls out action, method, target from element, or from the form if unset on the element (elements inherit these from the form they are tied to)

* if action is a URL, then initialize a fetch request using specified URL and method; if method is POST, then add a FormData payload for the specified form

* on fetch complete, the returned MIME type should match with the target attribute, which is extended to also accept a css selector:

   target=_self|_blank|_top  <=> content-type:text/html           => redirect | morph/hx-boost + push-url

   target=css selector       <=> content-type:text/html-fragment  => morph    | innerHTML

    <a action="/url" method="post" onclick="universalHandler(event)" form="someForm" target="_self">click me</a>

--- start quote ---

https://htmx.org/

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes: https://htmx.org/reference/#attributes

--- end quote ---

All my examples come directly from htmx documentation

agree that htmx has a regular language core for config options but, as hyperscript indicates, I’m not afraid of even a recursive language when I think it’s useful.

Hopefully we can get some of the ideas into HTML in a more standard form!

I initially dismissed wanting to add another scripting language to an app, but after some experimenting I have used it to replace 100s of lines of JS. Mainly for UI animations.

It’s not for the faint of heart, but enjoyable to learn.

I find the docs difficult to follow and would enjoy another hardback manual to sit next to this book, which is superb.

maybe next summer

Explain your point better

Original complaint: "it's describing a "whole other language" they call Hyperscript"

Response: hyperscript is a completely separate technology. htmx generalizes hypermedia controls, that's pretty much it, and it can be used with any scripting tool you'd like

My response:

In reality [1] htmx defines its own non-optional DSL that you have to use.

---

I will add that as with any organically grown nice-to-have utility DSLs it's quite haphazard (it's hyperscript-like in one place, js-like in another place, both in some other places etc.). But that's the nature of such ad-hoc informally specified DSLs

[1] which can be easily verified by just visiting https://htmx.org

---

I don't use hyperscript with my htmx, ergo it IS optional in objective reality. Citing a use with it does not prove it can't be used without it.

Nothing in the htmx docs shows it's optional.

There’s no magic abstractions going on. Everything is regular html elements. You can just use the regular js api.

Reading the docs and having an understanding of how frontend works would give you that information.

What do you think the whole reference is about?

What do you think the docs that use and show all that do?

> Reading the docs

https://htmx.org/docs/

Literally the first example uses htmx's DSL:

  <button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
  >
    Click Me!
  </button>

Edit: Don't forget also that this is entirely non-optional because if you use htmx, you will load the full support for it whether you use it or not