HTMX 2.0: What's New

May 29, 2024

dev htmx

HTMX 2.0 was released in June 2024. It’s a major version with breaking changes but also simplifications. Here’s what changed and how to upgrade.

Breaking Changes

No More IE Support

<!-- HTMX 1.x: Worked in IE11 -->
<!-- HTMX 2.x: Modern browsers only -->

If you need IE11, stay on 1.x.

Extension Changes

<!-- 1.x -->
<script src="htmx.js"></script>
<script src="ext/loading-states.js"></script>

<!-- 2.x: Extensions bundled differently -->
<script src="htmx.js"></script>
<script src="htmx-ext-loading-states.js"></script>

Some extensions moved to separate packages.

head-support Built-in

<!-- 1.x: Required extension -->
<head hx-ext="head-support">

<!-- 2.x: Built into core -->
<head hx-head="merge">

The head-support extension is now core functionality.

New Features

hx-on Wildcard

Handle any event with a single attribute:

<!-- Specific event -->
<button hx-on:click="alert('clicked')">Old Way</button>

<!-- Any event -->
<button hx-on::before-request="console.log('starting')">
  Wildcard
</button>

Improved hx-disabled-elt

<!-- Disable during request -->
<button hx-post="/save" 
        hx-disabled-elt="this, #other-btn">
  Save
</button>

More flexible element selection.

hx-inherit

Control attribute inheritance:

<div hx-target="#results" hx-swap="innerHTML">
  <!-- Children inherit by default -->
  <button hx-get="/a">A</button>
  
  <!-- Opt out of inheritance -->
  <button hx-get="/b" hx-inherit="none">B</button>
</div>

Title Updates

<!-- Update page title from response -->
<div hx-get="/page" hx-swap="innerHTML" hx-push-url="true">
  <!-- Response can include: -->
  <!-- <title>New Page Title</title> -->
</div>

Works with hx-push-url for proper history.

Enhanced View Transitions

<main hx-get="/page" 
      hx-swap="innerHTML transition:true">
  <!-- CSS View Transitions API -->
</main>

/* Style the transition */
::view-transition-old(root) {
  animation: fade-out 0.2s;
}

::view-transition-new(root) { 
  animation: fade-in 0.2s;
}

Configuration Changes

New Defaults

// 2.0 defaults changed
htmx.config.selfRequestsOnly = true; // Security improvement
htmx.config.scrollBehavior = 'instant'; // Was 'smooth'

New Config Options

htmx.config.allowNestedOobSwaps = true;
htmx.config.responseHandling = [
  {code: "204", swap: false},
  {code: ".*", swap: true}
];

Migration Guide

Update Script Tag

<!-- From -->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>

<!-- To -->
<script src="https://unpkg.com/htmx.org@2.0.0"></script>

Handle Removed Features

<!-- hx-ws and hx-sse are now extensions only -->
<!-- Install separately -->
<script src="htmx-ext-ws.js"></script>
<script src="htmx-ext-sse.js"></script>

Test Thoroughly

// Check for breaking changes
// 1. IE-specific code paths
// 2. Event handling changes
// 3. Attribute inheritance
// 4. Extension loading

Django Integration (Updated)

django-htmx 2.0+

pip install django-htmx>=2.0

# Works the same
def my_view(request):
    if request.htmx:
        return render(request, 'partial.html')
    return render(request, 'full.html')

New Patterns

<!-- With view transitions -->
<main id="content" 
      hx-get="{{ url }}"
      hx-target="this"
      hx-swap="innerHTML transition:true"
      hx-push-url="true">
</main>

# Return with updated title
def page_view(request):
    return render(request, 'page.html')

# page.html includes:
# <title>Page Title</title>
# which updates the browser title

Performance

Smaller Bundle

1.9.x: ~14KB gzipped
2.0.x: ~12KB gzipped

Removed IE polyfills and legacy code.

Faster Execution

Internal optimizations for common operations.

Compatibility

Browser Support

Browser	Supported
Chrome 88+	✅
Firefox 87+	✅
Safari 14+	✅
Edge 88+	✅
IE 11	❌

Framework Compatibility

Framework	Status
Django	✅ Works
Rails	✅ Works
Laravel	✅ Works
Flask	✅ Works
FastAPI	✅ Works

HTMX is framework-agnostic.

Best Practices (Updated)

Use Semantic IDs

<!-- Instead of generic IDs -->
<div hx-get="/items" hx-target="#target">

<!-- Use semantic IDs -->
<div hx-get="/items" hx-target="#item-list">

Leverage View Transitions

<style>
  @view-transition { navigation: auto; }
</style>

<nav>
  <a href="/page1" hx-boost="true">Page 1</a>
  <a href="/page2" hx-boost="true">Page 2</a>
</nav>

Progressive Enhancement

<!-- Works without JavaScript -->
<form action="/submit" method="post"
      hx-post="/submit"
      hx-target="#result">
  <!-- Falls back to regular form -->
</form>

Should You Upgrade?

Upgrade If

No IE11 requirement
Want smaller bundle
Want view transitions
Ready to test thoroughly

Stay on 1.x If

Need IE11 support
Heavily dependent on changed extensions
No time to test

Final Thoughts

HTMX 2.0 is a refinement, not a revolution. The breaking changes are manageable, and the improvements—especially view transitions and the smaller bundle—are worth the upgrade for most projects.

Test on a branch first.

HTMX 2.0: Leaner, modern, ready for production.