htmx 4.0: Build Interactive Websites With Less JavaScript

Tweet
Share
Share
Pin

Modern web development often means writing a lot of JavaScript.

Even simple interactions can require frameworks, state management, API calls, and complex frontend architecture.

But what if HTML could do more?

That is the idea behind htmx.

htmx allows developers to create interactive websites using HTML attributes instead of writing large amounts of JavaScript.

Now, htmx 4.0 introduces one of the biggest updates to the library.

The new version moves to the modern Fetch API, improves DOM updates, introduces built-in morphing swaps, and changes several parts of the htmx architecture.

In this guide, we’ll explore what’s new in htmx 4.0, how htmx works, practical examples, and whether developers should consider using it in 2026.

What Is htmx?

htmx is a lightweight JavaScript library that extends what HTML can do.

Normally, HTML elements cannot make arbitrary HTTP requests.

For example, clicking a button usually requires JavaScript if you want to fetch new content without reloading the page.

htmx changes that.

You can add special attributes directly to HTML elements.

For example:

<button
  hx-get="/users"
  hx-target="#results">
  Load Users
</button>

<div id="results"></div>

When the user clicks the button, htmx sends a request to /users.

The server returns HTML.

Then, htmx places that HTML inside #results.

No custom JavaScript fetch request is required.

What’s New in htmx 4.0?

htmx 4.0 is a major update.

One of the biggest changes is that htmx now uses the Fetch API instead of XMLHttpRequest.

However, that is not the only improvement.

htmx 4 also introduces changes related to:

  • Fetch-based networking
  • Streaming capabilities
  • Built-in morphing swaps
  • Partial page updates
  • Attribute inheritance
  • Event naming
  • Modern browser APIs

These changes modernize the library while keeping its core philosophy.

That philosophy is simple:

Use HTML for more application behavior and JavaScript only when necessary.

htmx 4 Now Uses the Fetch API

One of the biggest technical changes in htmx 4 is the move from XMLHttpRequest to fetch().

For many years, XMLHttpRequest was the standard way for JavaScript applications to communicate with servers.

You may have seen code like this:

const request = new XMLHttpRequest();

request.open("GET", "/users");

request.onload = function () {
  console.log(request.responseText);
};

request.send();

Modern JavaScript usually uses Fetch instead:

fetch("/users")
  .then(response => response.text())
  .then(html => {
    console.log(html);
  });

Fetch provides a more modern approach to network requests.

By moving to Fetch, htmx can better align with the modern web platform.

Why the Move to Fetch Matters

For most htmx developers, everyday syntax will still look familiar.

You can continue writing:

<button hx-get="/products">
  Load Products
</button>

The difference happens behind the scenes.

However, the new networking architecture opens the door to more modern browser capabilities.

One important area is streaming.

Servers can increasingly send content progressively instead of waiting until the entire response is ready.

That can improve how quickly users see useful information.

Built-In Morphing Swaps

Another major feature in htmx 4 is built-in morphing swaps.

Normally, htmx receives HTML from the server and replaces part of the page.

For example:

<div id="profile">
  <p>John Smith</p>
</div>

The server might return:

<div id="profile">
  <p>John Smith</p>
  <p>Web Developer</p>
</div>

A traditional swap can replace the existing DOM content.

Morphing works differently.

Instead of blindly replacing everything, a morphing algorithm compares the current DOM with the new HTML.

Then, it updates only what needs to change.

Why DOM Morphing Matters

Replacing DOM elements can sometimes create problems.

For example, it may affect:

  • Input state
  • Focus
  • Scroll position
  • Media playback
  • Interactive components

DOM morphing can preserve more of the existing page state.

This can make updates feel smoother.

It is especially useful for:

  • Forms
  • Dashboards
  • Search results
  • Filters
  • Interactive lists
  • Admin interfaces

With htmx 4, morphing becomes a more central part of the library.

What Is hx-partial?

htmx 4 also introduces hx-partial.

The idea is to make partial page updates cleaner.

Modern server-rendered applications often return small pieces of HTML.

For example, imagine an ecommerce page.

A user adds a product to the cart.

The server does not need to send the entire page again.

Instead, it could return only the updated cart interface.

This architecture can keep frontend code simple because the server remains responsible for generating HTML.

HTML Over JSON

This is one of the biggest differences between htmx and many JavaScript frameworks.

A traditional frontend application might request JSON.

For example:

{
  "name": "John",
  "role": "Developer"
}

JavaScript then converts that data into interface elements.

With htmx, the server can simply return:

<div class="user">
  <h3>John</h3>
  <p>Developer</p>
</div>

The browser already understands HTML.

Therefore, htmx can insert the response directly into the page.

This approach is sometimes called HTML over the wire.

htmx vs. React

htmx and React solve web development differently.

React usually gives the browser more responsibility.

The frontend receives data and uses JavaScript components to build the interface.

A simplified architecture may look like:

Browser
   ↓
JavaScript Application
   ↓
API
   ↓
JSON
   ↓
React Updates UI

htmx often uses a more server-driven model:

Browser
   ↓
HTTP Request
   ↓
Server
   ↓
HTML
   ↓
htmx Updates Page

Neither approach is automatically better.

They are useful for different types of applications.

When React Makes More Sense

React can be a strong choice for highly interactive applications.

Examples include:

  • Design tools
  • Complex dashboards
  • Collaborative applications
  • Advanced editors
  • Applications with large client-side state

In these situations, a powerful client-side component system can be useful.

When htmx Makes More Sense

htmx can work well when the server already handles most application logic.

Examples include:

  • Admin panels
  • CRUD applications
  • Ecommerce websites
  • Internal tools
  • Search interfaces
  • Traditional web applications
  • Content-heavy websites

In these projects, developers may not need a large JavaScript application.

htmx can add interactivity while keeping the architecture relatively simple.

htmx vs. Vanilla JavaScript

You can build everything htmx does with JavaScript.

For example, imagine a search feature.

Without htmx:

const button = document.querySelector("#search");

button.addEventListener("click", async () => {
  const response = await fetch("/search");
  const html = await response.text();

  document.querySelector("#results").innerHTML = html;
});

With htmx:

<button
  hx-get="/search"
  hx-target="#results">
  Search
</button>

The htmx version moves the interaction into HTML.

For simple server interactions, this can reduce boilerplate code.

A Simple Live Search Example

Imagine you want to search users as someone types.

With htmx, the input could look like this:

<input
  type="search"
  name="search"
  hx-get="/search"
  hx-trigger="keyup changed delay:500ms"
  hx-target="#results"
  placeholder="Search users..."
>

<div id="results"></div>

When the user types, htmx waits briefly and sends the search request.

The server returns HTML containing the results.

Then, htmx updates the page.

This creates a dynamic search interface with very little frontend code.

A Simple Form Example

htmx can also make forms interactive.

For example:

<form
  hx-post="/contact"
  hx-target="#message">

  <input
    type="email"
    name="email"
    required
  >

  <button type="submit">
    Send
  </button>

</form>

<div id="message"></div>

The form can submit without performing a traditional full-page reload.

The server might return:

<p>Thanks! Your message was sent.</p>

htmx then inserts the response into #message.

Again, the server controls the HTML.

htmx and Backend Frameworks

One advantage of htmx is that it is not tied to one backend language.

You can use it with technologies such as:

  • PHP
  • Laravel
  • Python
  • Django
  • Flask
  • Node.js
  • Express
  • Ruby on Rails
  • Go
  • ASP.NET

The server simply needs to respond to HTTP requests.

In many cases, it returns HTML fragments instead of JSON.

This makes htmx especially interesting for developers who already work with server-rendered frameworks.

htmx With PHP

Consider a simple PHP endpoint:

<?php

$users = [
  "John",
  "Sarah",
  "Michael"
];

foreach ($users as $user) {
  echo "<li>$user</li>";
}
?>

The frontend could request it with:

<button
  hx-get="/users.php"
  hx-target="#users">
  Load Users
</button>

<ul id="users"></ul>

The interaction remains simple.

There is no need to create a separate JSON API just to display a small list.

Does htmx Replace JavaScript?

No.

htmx itself is JavaScript.

More importantly, complex applications may still require custom JavaScript.

For example, you may need JavaScript for:

  • Complex client-side state
  • Canvas applications
  • WebGL
  • Advanced animations
  • Real-time interactions
  • Browser APIs
  • Complex drag-and-drop interfaces

The goal of htmx is not to eliminate JavaScript.

Instead, it reduces the amount of JavaScript developers need for common server interactions.

Why Developers Are Interested in Simpler Frontends

Modern frontend stacks can become complicated.

A project might include:

  • A frontend framework
  • Router
  • State management
  • API client
  • Build system
  • TypeScript
  • Component library
  • Validation library

These tools can be extremely useful.

However, not every project needs all of them.

For a basic CRUD application, a large frontend architecture may create unnecessary complexity.

htmx offers another option.

Developers can keep more application logic on the server while still creating responsive interfaces.

Is htmx Good for SEO?

htmx can work well with SEO when implemented correctly.

Because applications can start with server-rendered HTML, search engines can receive meaningful content without depending entirely on client-side rendering.

However, using htmx does not automatically guarantee good SEO.

Developers still need to consider:

  • Page titles
  • Meta descriptions
  • Semantic HTML
  • Internal links
  • Canonical URLs
  • Structured data
  • Performance
  • Accessibility

The architecture can make server-rendered content easier, but normal SEO practices still apply.

Should You Use htmx 4?

htmx 4 is worth exploring if you prefer server-driven web applications.

It can be especially useful if you already work with PHP, Laravel, Django, Rails, Go, or similar backend technologies.

You should consider htmx when:

  • Your server already renders HTML.
  • Your application mainly uses forms and CRUD operations.
  • You want less frontend JavaScript.
  • You do not need large amounts of client-side state.
  • You want to progressively enhance an existing website.

However, it may not be the best option for every application.

Complex client-heavy software may still benefit from frameworks such as React, Vue, or Svelte.

Frequently Asked Questions About htmx 4

What is htmx?

htmx is a JavaScript library that extends HTML with attributes for making HTTP requests and updating parts of a webpage.

What’s new in htmx 4?

htmx 4 introduces a Fetch-based networking architecture, built-in morphing swaps, changes to attribute inheritance, partial update improvements, and other modernization work.

Does htmx use JavaScript?

Yes. htmx is a JavaScript library. However, it allows developers to create many interactions using HTML attributes instead of writing custom JavaScript.

Is htmx better than React?

It depends on the application. htmx can be simpler for server-driven websites, while React may be better suited to applications with complex client-side state and interactions.

Can I use htmx with PHP?

Yes. htmx works well with PHP because the server can respond with HTML fragments that htmx inserts directly into the page.

Can I use htmx with Laravel?

Yes. Laravel can generate HTML responses and partial views that work well with htmx requests.

Is htmx good for beginners?

The basic concepts can be easy to understand, especially for developers already comfortable with HTML and server-side programming.

Final Thoughts

htmx 4.0 offers a different vision for modern web development.

Instead of moving more application logic into the browser, it allows developers to keep the server at the center of the architecture.

HTML becomes more powerful.

The server returns interface elements instead of only JSON.

Meanwhile, htmx handles requests and page updates with minimal frontend code.

Version 4 modernizes this approach with Fetch-based networking, morphing swaps, and improvements to partial page updates.

It will not replace React, Vue, or other frontend frameworks.

It does not need to.

For many websites and server-driven applications, the more important question is simpler:

Do you really need a large JavaScript frontend for this project?

With htmx 4.0, the answer may increasingly be no.