Pessimistic scenarios in optimistic updates with LiveView

rhcarvalho · April 5, 2026, 4:22pm

Yes, hook or a global listener. See:

Handling server-pushed events (global)
Client-server communication (hook)

There’s also an unreleased improvement in main related to this use case, as discussed in Make `JS.t()` a public data structure, or json serializable and implemented in Support pushing JS commands via events by rhcarvalho · Pull Request #4060 · phoenixframework/phoenix_live_view · GitHub .

The relevant piece of documentation in main:

github.com/phoenixframework/phoenix_live_view

lib/phoenix_live_view/js.ex

52c9d3b6a


      
          > #### Automatic encoding {: .tip}
          >
          > Note that you don't need to call `to_encodable/1` if you are using `Jason` or
          > `JSON`, instead you can pass the JS commands directly:
          >
          > ```elixir
          > socket
          > |> push_event("myapp:exec_js", %{
          >   to: "#items-#{item.id}",
          >   js: JS.show()
          > })
          > ```
          
          On the client, handle the event and execute the commands:
          
          ```javascript
          window.addEventListener("phx:myapp:exec_js", e => {
            const {to, js} = e.detail;
            const el = document.querySelector(to);
            if (el && js) {

This file has been truncated. show original

The good news is that with the latest LV release (v1.1.28), i.e. without the improvement above, you can still follow the “common case” documented above, and pre-encode your command(s) as a data attribute in some element.

Note that you don’t have to restrict you JavaScript event handler to execute LV’s “JS Commands”, you can run any JavaScript code you want.