[HTMX in Drupal] Client-Side-Tempalte Component using Drupal JSON-API as Data

Thu, 11 Dec 2025 00:00:00 +0000

Introduction

Starting from Version 11.2, Drupal core will include HTMX as a part of its core dependencies, you can attach it to any twig template via the {{ attach_library('core/htmx') }} statement, for instance to achieve the following accordion component using HTMX, simply create the following SDC component:

FILE: olivero/component/htmx_accordion.twig

{{ attach_library('core/htmx') }}
{% set container_id = "content-wrapper-" ~ random() %}
<div class="htmx-accordion active" id="{{ container_id }}">
    <div>   
        {{accordion_title}}
        <button hx-on:click="htmx.toggleClass(htmx.find('#{{ container_id }}'), 'active')">BUTTON</button> <!-- Reference: https://htmx.org/api/#toggleClass -->
    </div>
    <div> 
        {{accordion_body}}
    </div>
</div>

FILE: olivero/component/htmx_accordion.component.yml: only required for SDC component discovery pupose, can leave empty

HTMX on Simon's Blog

[HTMX in Drupal] Client-Side-Tempalte Component using Drupal JSON-API as Data

Introduction