htmx (also stylized as HTMX) is an

open-source Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use and view the source code, design documents, or content of the product. The open source model is a decentrali ...

front-end

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

library that extends

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

with custom attributes that enable the use of

AJAX Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * Ajax (play), ''Ajax'' (play), by the an ...

directly in HTML and with a

hypermedia Hypermedia, an extension of hypertext, is a nonlinear medium of information that includes graphics, audio, video, plain text and hyperlinks. This designation contrasts with the broader term ''multimedia'', which may include non-interactive linear ...

-driven approach. These attributes allow for the dynamic definition of a

web page A web page (or webpage) is a World Wide Web, Web document that is accessed in a web browser. A website typically consists of many web pages hyperlink, linked together under a common domain name. The term "web page" is therefore a metaphor of pap ...

directly in HTML and CSS, without the need for writing additional JavaScript. These attributes allows tasks that traditionally required writing JavaScript to be done completely with HTML. The library was created by Carson Gross as a new version of intercooler.js. The library supports communication with the

server Server may refer to: Computing *Server (computing), a computer program or a device that provides requested information for other programs or devices, called clients. Role * Waiting staff, those who work at a restaurant or a bar attending custome ...

using standard

HTTP HTTP (Hypertext Transfer Protocol) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, wher ...

methods and simplifies inserting server responses (usually text or HTML fragments) into designated parts of the web page without having to redraw the entire page. This in turn allows for similar behavior to what can be achieved with reconciliation behavior in

virtual DOM A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm. Since generating a virtual DOM is relatively fast, any given framework is free to rer ...

History

htmx has its roots in intercooler.js, a frontend library created by Carson Gross in 2013. The library aimed to address the complexity associated with

(asynchronous JavaScript and

XML Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing data. It defines a set of rules for encoding electronic document, documents in a format that is both human-readable and Machine-r ...

) by introducing a simplified approach using HTML attributes. The intent was to create a framework that was aligned with

Roy Fielding Roy Thomas Fielding (born 1965) is an American computer scientist, one of the principal authors of the HTTP specification and the originator of the Representational State Transfer (REST) architectural style. He is an authority on computer network ...

's original intent for

REST REST (Representational State Transfer) is a software architectural style that was created to describe the design and guide the development of the architecture for the World Wide Web. REST defines a set of constraints for how the architecture of ...

(representational state transfer) - and specifically

HATEOAS Hypermedia as the engine of application state (HATEOAS) is a constraint of the REST software architectural style that distinguishes it from other network architectural styles. With HATEOAS, a client interacts with a network application whose appl ...

(hypermedia as the engine of application state). The problem is described in Fielding's blog post "REST APIs must be hypertext-driven" from October 2008. htmx was created as an improved version of intercooler.js that did not rely on jQuery with version 1.0.0 being released in November 2020. The release of htmx was a significant milestone for the project, by offering a way to utilize AJAX, CSS transitions, WebSockets, and Server-Sent Events directly in HTML using attributes. In 2023, htmx was added to the first cohort of the

GitHub GitHub () is a Proprietary software, proprietary developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide distributed version control and GitHub itself provides access control, bug trackin ...

Accelerator program, a program the provides open source projects with funding and guidance from members of mature open source projects.

Design and functionality

htmx combines the capabilities of modern frameworks with the server-side processing of traditional web applications. The library's design philosophy revolves around a goal to "complete

as a

hypertext Hypertext is E-text, text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access. Hypertext documents are interconnected by hyperlinks, which are typic ...

." By leveraging custom

HTML attributes HTML attributes are special words used to adjust the behavior or display of an ''HTML element''. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function corre ...

prefixed with hx- to trigger

requests to fetch content to update parts of the DOM with, htmx enables developers to define dynamic behavior directly within their markup, reducing or even eliminating the need for extensive JavaScript code. This allows the library to avoid issues with large bundles, complex state management, and hydration. This approach offers a more accessible and intuitive way to build modern user interfaces while avoiding the complexities often associated with traditional JavaScript frameworks. As htmx can update specific parts of a webpage without the need to reload the entire page, as would be the case with plain HTML and CSS, using it might result in improved user experience and performance, since only a part of the data needs to be re-fetched from the server. The library also challenges the common approach of utilizing

JSON JSON (JavaScript Object Notation, pronounced or ) is an open standard file format and electronic data interchange, data interchange format that uses Human-readable medium and data, human-readable text to store and transmit data objects consi ...

as the standard payload for

requests by replacing it with HTML. This is meant to solve the issues related to the performance and cognitive overhead of JSON

serialization In computing, serialization (or serialisation, also referred to as pickling in Python (programming language), Python) is the process of translating a data structure or object (computer science), object state into a format that can be stored (e. ...

, deserialization, and subsequent use in the user interface, such as JavaScript and JSON's inability to accurately process numbers greater than 2⁵³ or distinguish

floating-point numbers In computing, floating-point arithmetic (FP) is arithmetic on subsets of real numbers formed by a ''significand'' (a signed sequence of a fixed number of digits in some base) multiplied by an integer power of that base. Numbers of this form ...

from

integers An integer is the number zero (0), a positive natural number (1, 2, 3, ...), or the negation of a positive natural number (−1, −2, −3, ...). The negations or additive inverses of the positive natural numbers are referred to as negative in ...

and the complexity involved with alternatives to JSON-oriented REST, such as

GraphQL GraphQL is a data query and manipulation language that allows specifying what data is to be retrieved (" declarative data fetching") or modified. A GraphQL server can process a client query using data from separate sources and present the res ...

gRPC gRPC (acronym for gRPC Remote Procedure Calls) is a cross-platform high-performance remote procedure call (RPC) framework. gRPC was initially created by Google, but is open source and is used in many organizations. Use cases range from microservi ...

. Additionally, a potential advantage of htmx and hypertext-oriented approach in general, is that data retrieved directly from the database does not need to either be in a JSON or JSON-compliant format, such as that used by many document databases or the

PostgreSQL PostgreSQL ( ) also known as Postgres, is a free and open-source software, free and open-source relational database management system (RDBMS) emphasizing extensibility and SQL compliance. PostgreSQL features transaction processing, transactions ...

's JSON type, or be serialized by the backend only to be then deserialized by the frontend again. The reduced client-side computation also helps to shift the development focus towards the backend, which might result in better client-side performance, albeit at a cost of higher server load, and providing the developers with a simpler way to solve more problems which they would otherwise solve using client-side JavaScript in virtually any other programming language.

Usage

htmx adds custom attributes to HTML to define dynamic behavior such as triggering server requests and updating content. The functionality of htmx is built off of the attributes hx-get, hx-post, hx-put, hx-delete, andhx-patch, which issue AJAX requests with the specified HTTP method. These requests are made when a certain DOM event is fired: change for input, select, and textarea elements; submit for form elements; and click for other elements. The event can also be overridden with hx-trigger. Other attributes include hx-target for specifying a target other than the current element for swapping content into and hx-swap for setting how the content fetched from the server should be swapped or placed relative to the target element.

Community and adoption

Since its inception as intercooler.js and its subsequent evolution into htmx, the library has gained a significant following within the web development community. htmx has been viewed as a simpler and lighter weight alternative to full-blown JavaScript frameworks like React, Vue.js, and Angular. As a result, it has gained a measure of popularity as an alternative to the approach used by most JavaScript frameworks for building dynamic web applications. htmx integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including Node.js, Django, Flask,

Adobe ColdFusion Adobe ColdFusion is a commercial rapid web-application development computing platform created by J. J. Allaire in 1995. (The programming language used with that platform is also commonly called ColdFusion, though is more accurately known as C ...

ASP.NET ASP.NET is a server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services. The name stands for Ac ...

Java Java is one of the Greater Sunda Islands in Indonesia. It is bordered by the Indian Ocean to the south and the Java Sea (a part of Pacific Ocean) to the north. With a population of 156.9 million people (including Madura) in mid 2024, proje ...

Clojure Clojure (, like ''closure'') is a dynamic programming language, dynamic and functional programming, functional dialect (computing), dialect of the programming language Lisp (programming language), Lisp on the Java (software platform), Java platfo ...

, and

Ruby on Rails Ruby on Rails (simplified as Rails) is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pa ...

. Such libraries are usually a matter of nothing more than convenience since htmx's portable and minimalist design allows it to be integrated with virtually any HTML templating engine.

References

External links