htmx

htmx provides direct access to modern browser features like AJAX, CSS Transitions, WebSockets, and Server-Sent Events right within your HTML. By using simple attributes, you can build sophisticated user interfaces with the inherent simplicity and power of hypertext, significantly reducing the need for complex JavaScript.

This lightweight library is dependency-free, extendable, and has a minimal footprint (~14k min.gz'd). It fundamentally rethinks the limitations of standard HTML, asking why only certain elements or events should trigger server requests. htmx removes these constraints, allowing any element to make any kind of HTTP request and update any part of the page in response. This approach has been shown to reduce code base sizes by 67% compared to frameworks like React.

Getting started is as simple as adding a script tag and a few hx-* attributes to your elements. For example:

• hx-post="/clicked": Sends a POST request to the specified URL.
• hx-trigger="click": Specifies the event that triggers the request.
• hx-target="#parent-div": Defines which element's content gets replaced.
• hx-swap="outerHTML": Determines how the new content is swapped in.

By extending HTML's capabilities, htmx offers a simpler, more direct way to create dynamic web applications.