Skip to main content

HTMX in Drupal Core: The Ajax API Replacement That Is Long Overdue

· 5 min read
Victor Jimenez
Software Engineer & AI Agent Builder

For over a decade, Drupal developers have relied on Drupal.ajax — a powerful but heavy abstraction layer over jQuery — to handle dynamic interactions. With jQuery's slow sunset and the rise of "HTML-over-the-wire" paradigms, the HTMX in Drupal Core initiative is the most sensible thing to happen to Drupal's frontend in years.

I built a proof-of-concept module to test what this migration actually looks like in practice.

The Problem with Drupal.ajax

"The server returns a JSON array of commands (insert, remove, invoke), which the client must parse and execute."

— Drupal Ajax Framework, Core Documentation

Context

Drupal's Ajax system was built when jQuery was the only game in town and server-rendered HTML was unfashionable. The framework sends a proprietary JSON command protocol from PHP to JavaScript, which the client interprets and executes. Every other modern framework has moved past this pattern.

ProblemImpact
Proprietary JSON command protocolDevelopers must learn Drupal-specific API instead of web standards
Tight jQuery couplingBlocks migration to modern JS
Client-side command runnerComplexity that HTMX eliminates entirely
Heavy payloadJSON commands instead of plain HTML fragments

The HTMX Solution

HTMX offers a simpler, declarative model. You define interactions in HTML attributes, and the server returns HTML fragments. No custom JSON protocol. No complex client-side command runner.

Code Comparison

Here is how a simple "Get Server Time" feature looks in both paradigms.

The Controller

src/Controller/HtmxDemoController.php
public function time() {
$time = $this->time->getCurrentTime();
$formatted = $this->dateFormatter->format($time, 'long');

// Just return HTML. Simpler, lighter.
return new Response("<div>Time: $formatted</div>");
}

The Frontend

templates/htmx-demo.html.twig
<!-- Declarative: Get from URL, swap into target -->
<button hx-get="/htmx-demo/time"
hx-target="#container"
hx-swap="innerHTML">
Get Time
</button>

Side-by-Side Comparison

AspectDrupal AjaxHTMX
Server responseProprietary JSON commandsStandard HTML fragments
Client libraryjQuery + drupal.ajaxhtmx.js (~14KB)
Learning curveDrupal-specific APIHTML attributes (web standard)
JS knowledge neededMust understand AjaxCommand APIMinimal to none
Backend approachBuild AjaxResponse with commandsReturn HTML string or render array
DebuggingInspect JSON command arrayInspect HTML response in Network tab
Framework couplingDrupal-onlyFramework-agnostic
Reality Check

Full core replacement is a massive undertaking. Drupal's Ajax system is deeply embedded in Form API, Views, field widgets, and dozens of contrib modules. The benefits of HTMX are clear, but the migration path will take years and involve painful backward-compatibility work. Do not expect to rip out drupal.ajax from your contrib modules next quarter.

Why This Matters

Who benefits and how
  • Frontend devs don't need to learn the AjaxCommand PHP API.
  • Backend devs can return standard render arrays or templates.
  • Performance improves by removing the jQuery and drupal.ajax overhead.
  • New contributors face a lower barrier to entry — HTMX is HTML, not a Drupal-specific protocol.
  • The Drupal ecosystem aligns with the broader web ecosystem, making it more accessible to developers coming from other frameworks.

The Code

View Code

Why this matters for Drupal and WordPress

For Drupal module developers, HTMX adoption in core means rewriting Ajax-heavy contrib modules to return HTML fragments instead of JSON command arrays — starting with custom form widgets, Views exposed filters, and admin UI interactions. WordPress developers already familiar with HTMX through plugins like flavor or admin-ajax alternatives will find that Drupal's move validates the HTML-over-the-wire pattern at CMS-core level, making cross-CMS frontend skills more transferable. Agencies maintaining both Drupal and WordPress sites benefit from a converging frontend model where server-rendered HTML replaces framework-specific JavaScript abstractions.

What I Learned

  • HTMX is a natural fit for Drupal's server-rendered philosophy. The paradigm match is almost too perfect.
  • The migration from Ajax to HTMX is straightforward for new features. Retrofitting existing Ajax-heavy modules is where the real work lives.
  • Removing the JSON command protocol eliminates an entire category of Drupal-specific knowledge that new developers currently have to learn.
  • This initiative deserves more attention and contributor effort than it is currently getting.

References


Looking for an Architect who doesn't just write code, but builds the AI systems that multiply your team's output? View my enterprise CMS case studies at victorjimenezdev.github.io or connect with me on LinkedIn.