DOCSEARCHbyAlgolia
Submit Docs

htmx

repository·master·Indexed 13 days ago

https://github.com/bigskysoftware/htmx

A library that allows access to AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML using attributes. Version 2.0.10 provides tools for building modern web interfaces with minimal JavaScript by following HATEOAS principles, allowing any element to trigger HTTP requests and perform partial DOM updates via hx-swap.

Tokens
113.8K
Snippets
258
Records
535
Agent score
99%

What's inside htmx

  1. What is htmx?

    master

    htmx is a dependency-free JavaScript library that allows you to access modern browser features directly from HTML. It extends the core idea of HTML as hypertext by allowing any element to issue HTTP requests, any event to trigger those requests, any HTTP verb to be used, and any element to be the target of an update.

    When using htmx, the server typically responds with HTML rather than JSON, adhering to the Hypertext As The Engine Of Application State (HATEOAS) model.

    If you prefer, you can use the data- prefix for all htmx attributes (e.g., data-hx-post="/click") to avoid conflicts with other libraries.

    <button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>

  2. Overview of htmx Extensions

    master

    htmx extensions augment the core hypermedia infrastructure, allowing for new features without bloating the core library. Extensions are categorized into two types:

    1. Core Extensions: Maintained and supported by the htmx team.
    2. Community Extensions: Maintained and supported by the broader htmx community.

    If you wish to develop your own extension, refer to the Building htmx Extensions guide.

  3. Introduction to htmx

    master

    htmx is a lightweight, dependency-free library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML using attributes. It enables the creation of modern user interfaces by extending HTML capabilities, following the principles of HATEOAS and hypermedia-driven applications.

    Key characteristics:

    • Small footprint: Approximately ~16k min.gz'd.
    • Dependency-free: Does not require other libraries to function.
    • Extendable: Supports extensions to add more functionality.
    • Reduced complexity: Offers a significantly smaller codebase compared to frameworks like React for many use cases.

  4. Introduction to Kutty

    master

    Kutty is a successor to intercooler.js designed to bring modern browser features (like AJAX and CSS transitions) directly into HTML. Unlike many JavaScript frameworks, Kutty focuses on enhancing HTML through a declarative approach rather than replacing it.

    Key characteristics include:

    • No external dependencies: It does not require jQuery or other libraries.
    • Browser Compatibility: It has been tested with IE11.
    • HTML-centric: It follows conventional naming and behavior standards (e.g., innerHTML and outerHTML) more closely than its predecessor.
    • Improved Swapping: Features a swapping mechanism with a 'settling step' that enables smooth CSS transitions when returning HTML.

  5. Compare alternatives to htmx

    master
    If htmx does not fit your specific application needs, several other libraries and frameworks embrace the hypermedia-oriented approach to web development. These range from mature frameworks like Unpoly and Hotwire Turbo to minimalist implementations like fixi.js and htmz, or SSE-oriented tools like Datastar.

  6. Explore htmx Community Extensions

    master

    HTMX supports a variety of community-maintained extensions that expand its capabilities in areas like data handling, UI state management, and third-party integrations. These extensions are categorized into several functional groups:

    Core Extensions

    Enhance standard htmx behavior, such as adding headers (ajax-header, event-header), managing UI states (loading-states, optimistic, remove-me), or modifying swap strategies (alpine-morph, morphdom-swap, multi-swap).

    Data API Extensions

    Modify how data is sent to or received from the server. This includes encoding parameters as JSON (json-enc, form-json, json-enc-custom), transforming JSON responses into HTML (client-side-templates, htmx-json), or populating path variables (path-params).

    Integrations

    Connect htmx with specific technologies like AWS (amz-content-sha256) or real-time bidirectional communication via SignalR (signalr).

    Legacy Extensions

    Some previous extensions have been integrated into htmx core. For example, disable-element is now handled by the core hx-disabled-elt attribute, and include-vals is now handled by hx-vals.

  7. What is a Uniform Interface in REST?

    master

    The Uniform Interface is the central feature of REST that distinguishes it from other network-based styles. It consists of four constraints that allow a client (like a browser) to interact with a server without needing prior knowledge of the specific resources it is accessing:

    1. Identification of Resources: Resources are identified via URLs (e.g., /contacts/42).
    2. Manipulation of Resources Through Representations: Clients interact with resources by sending/receiving representations (e.g., HTML or JSON) rather than direct database commands.
    3. Self-Descriptive Messages: The message sent from the server contains all the information the client needs to understand the data and the possible operations (e.g., an HTML page containing links to edit or archive).
    4. Hypermedia As The Engine of Application State (HATEOAS): Clients transition between application states by following links and interacting with forms provided within the hypermedia itself. This allows the server to change the available actions dynamically without updating the client code.
    <html>
  <body>
  <section>
    <p>Name: Joe Blow</p>
    <p>Email: joe@blow.com</p>
    <p>
      <a href="/contacts/42/edit">Edit</a>
      <a href="/contacts/42/email">Email</a>
      <a href="/contacts/42/archive">Archive</a>
    </p>
  </section>
</body>
</html>

  8. What is Architectural Sympathy in htmx

    master

    Architectural Sympathy is a design principle where a piece of software adopts and conforms to the architectural patterns of an existing system.

    In the context of htmx, this means the library is designed to 'fold in' to the existing conceptual architecture of the Web rather than replacing it. While Single Page Application (SPA) frameworks often replace the REST-ful, hypermedia-oriented architecture of the web with a thick-client, RPC-like model, htmx maintains sympathy with the original web model by:

    • Mimicking core hypermedia-exchange mechanics: Using the same patterns as links and forms.
    • Using CSS selectors: For targeting elements.
    • Using standard URL paths: For designating endpoints.
    • Using standard API language: For specifying swap types.

    By following these patterns, htmx allows developers to use their existing knowledge of the web to build interactive applications without learning an entirely new conceptual model.

  9. What is HATEOAS and the Uniform Interface constraint?

    master

    HATEOAS (Hypermedia As The Engine of Application State) is a core constraint of the REST architectural style. It falls under the uniform interface constraint.

    In a HATEOAS-compliant system, a client should be able to interact with the API starting from a single entry point (a URI) without prior knowledge of other endpoints. All subsequent actions and state transitions are driven by the hypermedia controls (like links and forms) provided within the server's responses. This makes the API self-describing and allows the server to evolve its interface dynamically without breaking clients.

  10. What is HTML-Centric Development?

    master

    HTML-Centric (or Hypertext-Centric) development is an alternative to the Single Page Application (SPA) paradigm. Instead of using a client-side JavaScript model (like React) that communicates with a backend API, HTML-Centric development treats HTML as the primary medium of application development.

    In this model, the server returns HTML fragments that are swapped into the page, rather than returning JSON data for a JavaScript framework to render. This approach leverages the original web architecture (REST and HATEOAS) and uses tools like htmx to extend HTML's capabilities beyond its native limitations.

  11. What is the Locality of Behaviour (LoB) principle?

    master

    Locality of Behaviour (LoB) is a software design principle stating that the behaviour of a unit of code should be as obvious as possible by looking only at that unit of code.

    In the context of web development, this means that when inspecting an HTML element, a developer should be able to understand what that element does (e.g., which endpoint it calls, what trigger it uses) without having to search through external JavaScript files or complex event listeners. This reduces "spooky action at a distance," where changes in one file unexpectedly affect behavior in another, thereby improving maintainability and code comprehension.

    <!-- Good LoB: The behavior is obvious on the element itself -->
<button hx-get="/clicked">Click Me</button>

<!-- Poor LoB: The behavior is hidden in a separate JavaScript block/file -->
<button id="d1">Click Me</button>
<script>
  $("#d1").on("click", function(){
    $.ajax({
         /* AJAX options... */
    });
  });
</script>

  12. What is the Hypermedia-Driven Application (HDA) architecture?

    master

    The Hypermedia-Driven Application (HDA) architecture is a design pattern that synthesizes the simplicity of traditional Multi-Page Applications (MPAs) with the enhanced user experience of Single-Page Applications (SPAs).

    An HDA is characterized by two primary constraints:

    1. Declarative, HTML-embedded syntax: It uses attributes directly in HTML to achieve interactivity rather than relying on large amounts of imperative client-side scripting.
    2. Hypermedia-based server interaction: The client interacts with the server using hypermedia (HTML) rather than non-hypermedia formats like JSON. This allows the application to continue using HATEOAS (Hypermedia As The Engine Of Application State).

    In an HDA, scripting (Code-On-Demand) is used to augment the hypermedia experience rather than supersede the fundamental REST-ful architecture.