HTMX - A js library sort of like liveview

Phoenix Forum Chat / Discussions
,
#1

I recently came across the javascript library htmx. It reminded me a lot of liveview so I thought the community here might be interested.

It basically lets you use HTML attributes to connect portions of your page to the server dynamically like this:

<button hx-post="/submit-button" hx-swap="outerHTML">Click Me</button>

Will trigger a post request to /submit-button and replace the button with the HTML in the response.

<div hx-get="/news" trigger="every 2s"></div>

Will replace the contents of the div with the HTML returned by a get to /news every 2 seconds.

It does websockets and server sent events too:

  <div hx-ws="connect wss:/chatroom">
    <div id="chat_room"></div>
    <form hx-ws="send:submit">
        <input name="chat_message">
    </form>
  </div>

The server can respond with HTML having the id="chat_room" hx-swap-oob="true" attributes which will tell htmx to swap out the #chat_room element with the new HTML.

The part I find most interesting is that there are no special requirements for the server at all. Not even for the websocket support. Any server which can reply with HTML will work.

9 Likes
#2

Nice, the successor to intercooler.js by the same creator.

A WebSocket server is still required for connect wss:/. It’s still a WebSocket underneath.

1 Like
#3

As per Intercooler.js page:

Work on intercooler 2.0 (renamed to htmx) has begun. See htmx.org for more information!

It seems to be an improvement over Intercooler without any external dependencies and with fewer but stronger core concepts backed by a powerful extension system.

We at Bizneo have been using Intercooler.js for multiple years now. It has been really stable and a joy to work with. Our backend responds with HTML and Intercooler picks and replaces the selected elements in the page.

Just recently we extracted our Intercooler code to a plug which detects Intercooler requests to make redirections work and allow further customizations down the pipeline.

We want to make a few changes in the README and documentation before pushing the package to hex.pm, but it can be already used by fetching it from GitHub. We have been using it for some time without any problem.

# In your mix.exs
{:intercooler, "~> 0.1", github: "bizneo/intercooler"},

Looking at the similarity between HTMx and Intercooler.js, and since both come from the same author I will probably try to update the plug to support both libraries instead of Intecoooer only.

4 Likes
#4

Nice!! any progress on this. Htmx seems to be a really cool technology to work with.

#5

The creator of the library is not here.

#6

Thanks for sharing your library.

I like the simplicity of it. One of things about tech like this, is that it’s very approachable to designers and non-developers.

It feels like “simple solution” that took a lot of thought and design to arrive at.

2 Likes
#7

Is there a way to use HTMX with Phoenix and websocket, without using LiveView. Maybe with channels. Or do I have to code a basic websocket server into Phoenix for this ?