HTMX + Alpine.js: Displaying HTTP Errors Using the HTML <dialog> Element

htmx_response_error.html

<!-- Copy and paste the following to every html file. -->
<div x-data="{ open: false, title: '', content: '' }"
     x-on:htmx:response-error.window="title = $event.detail.xhr.statusText; content = $event.detail.xhr.responseText; open = true">
  <dialog x-bind:open="open">
    <article>
      <h2>Error: <span x-text="title"></span></h2>
      <p><code x-text="content"></code></p>
      <footer>
        <button x-on:click="open = false">OK</button>
      </footer>
    </article>
  </dialog>
</div>

Example: