HTMX

HTMX in Drupal Core! HTMX was added as a dependency to Drupal on in 11.2 as part of the Replace AJAX API with HTMX community initiative. We are actively working to bring a full feature set to Drupal 11.3. If you would like to help then come collaborate on one of the child issues of [Plan] Gradually replace Drupal's AJAX system with HTMX. We can use code reviews, manual testing, and DX feedback. 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 hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react By removing these arbitrary constraints, htmx completes HTML as a hypertext data-hx-target="#drupal-off-canvas-wrapper" data-hx-select="#drupal-off-canvas-wrapper" data-hx-swap="outerHTML ignoreTitle:true" class="button"> Add The data-hx-get and data-hx-select attributes on this button tell htmx: “When a user clicks on this button, issue an GET request to /htmx/blocks/add/announce_block, and select from the response the content with id drupal-off-canvas-wrapper” The data-hx-target and data-hx-swap attributes tell htmx: "Replace the existing content with id drupal-off-canvas-wrapper with the selected content." Watch a recent session on HTMX in Drupal For developers We provide an easy developer experience in a fully documented class for assembling your HTMX attributes. Here's how we built the render array for the button described above: <?php $row['operations']['data'] = [ '#type' => 'button', '#value' => 'Add', '#attributes' => [ 'class' => ['button'], ], ]; $htmxAddButton = new HtmxAttribute($row['operations']['data']['#attributes']); $htmxAddButton->get(Url::fromRoute('entity.htmx_block.add_form', ['plugin_id' => $plugin_id])) ->target('#drupal-off-canvas-wrapper') ->select('#drupal-off-canvas-wrapper') ->swap('outerHTML ignoreTitle:true'); $row['operations']['data']['#attributes'] = $htmxAddButton->toArray(); ?> Read about an admin interface we built in Drupal for a more in-depth introduction. Full documentation is available in our documentation site and also included in the docs directory of the module. Why do I want this over react or vue js? Why you want to use htmx? Read this article about the "Rule of Least Power". Hypermedia Hypermedia is the basic architecture of the web. Learn more about this foundation and how HTMX aligns the hypermedia capabilities of HTML with HTTP in Hypermedia Systems Installation composer require drupal/htmx Library inclusion In your module or theme add htmx/drupal as a dependency. {# In a Twig template we attach the library. #} {{ attach_library('htmx/drupal') }} or <?php $build['#attached']['library'][] = 'htmx/drupal'; ?>