---
title: "💭 </> htmx ~ The response-targets Extension"
description: "!https://htmx.org/extensions/response-targets/"
date: 2024-04-30
published: true
tags:
  - htmx
  - webdev
  - thought
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://htmx.org/extensions/response-targets/" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-content">
      <div class="embed-card-title">&lt;/&gt; htmx ~ The htmx Response Targets Extension Extension</div>
      <div class="embed-card-description">htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert...</div>
      <div class="embed-card-meta">htmx.org</div>
    </div>
  </a>
</div>


The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

> !!! note
    by default htmx will only swap on 200 and 300 responses

Load the extension in head

``` html
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/response-targets.js"></script>
```

Use  the extension on an endpoint that might return a 400.


``` html
<div hx-ext="response-targets">
    <div id="response-div"></div>
    <button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>
    <div id="serious-errors"></div>
    <div id="not-found"></div>
</div>
```

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>
