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.

14 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.

6 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 ?

8

Phoenix web sockets work with channels and htmx likes to work with websockets without channels.
I have had a great experience using Server Sent Events (SSE) instead of web sockets. It works really nice with phoenix and htmx.

3 Likes
9

I’ve recently found htmx and it looks very promising. I think I’ll use it for a while in my work project and share my experience here

10

I am using it currently.

Some things to watch out for:

  1. It can be barebones at time compared to other solutions (i.e. LiveView / Turbo)
  2. You’ll want to rewrite 302s to 303s to avoid browser issues when implementing DELETE. Another option is to set the HX-Redirect header when it is a 302(?), which I have not tried. Here is more context. Hotwired/Turbo does the same thing. To make the mental model easier (even if Not Proper™) I just rewrite all 302s to 303s when sent to the browser so I don’t have to reason about whether or not it’s the proper response status. This will affect your browser tests though, so it would be worth looking into the HX-Redirect alternative:
defmodule HTMXRedirect do
  import Plug.Conn


  def init(default), do: default

  def call(conn, _opts) do
    register_before_send(conn, fn conn ->
      if conn.status == 302 do
        put_status(conn, :see_other)
      else
        conn
      end
    end)
  end
end

Some issues I’ve ran into:

  1. Scroll position is not properly restored when the current page you’re on doesn’t have the same height as the previous page.
  2. Sometimes dynamically loaded scripts in the body do not load. I just disable hx-boost to those pages.
  3. Browser link resolution can cause the base url to point to the previous page.

bonus:

I use hx-preserve and create a container for topbar so I can get the same loading bar that phoenix has.

  1. "topbar": "github:100phlecs/topbar" in package.json deps, npm i
    ( GitHub - 100phlecs/topbar: Tiny & beautiful site-wide progress indicator )
  2. in your app.js 
import topbar from "topbar"

topbar.config({
  containerId: "topbar-container",
})

window.addEventListener("htmx:before-request", (_info) => topbar.show(500))
window.addEventListener("htmx:after-request", (_info) => topbar.hide())
  1. in your root.html.heex 
    <div id="topbar-container" hx-preserve="true" />

Conclusion

Overall, it’s fine.
It’s rough around the edges, maybe optimized for Django? No clue.

I like how everything is an attribute, while in Turbo you have to create custom elements and massage your markup differently.
Being able to html-swap different parts of the screen helps (flashes, for example)

I did have to reinvent the wheel for other things, like asset digest mismatch (i.e. turbo-track-reload).

Let me know if you have any questions.

17 Likes
11

That’s a great and thoroughly detailed post, thank you!

3 Likes
12

would you mind posting a hello world of phoenix + htmx?

13

Here’s a basic example of HTMX to “edit in line” when on the “Show” page of a post

2 Likes