htmx

htmx has its roots in intercooler.js, a frontend library created by Carson Gross in 2013.{{cite web |title=htmx 1.0.0 has been released |url=https://htmx.org/posts/2020-11-24-htmx-1-0-0-is-released/#:~:text=htmx%20began%20life%20as%20intercooler,js%20back%20in%202013. |access-date=2024-04-04 |publisher=HTMX |publication-date=2020-11-24}} The library aimed to address the complexity associated with AJAX (asynchronous JavaScript and XML) by introducing a simplified approach using HTML attributes.{{Cite web |last=Melanson |first=Mike |date=2022-01-19 |title=Htmx: HTML Approach to Interactivity in a JavaScript World |url=https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/ |access-date=2024-04-24 |website=The New Stack |language=en-US}} The intent was to create a framework that was aligned with Roy Fielding's original intent for REST (representational state transfer) - and specifically HATEOAS (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.{{Cite web |last=Gross |first=Carson |title=Simple AJAX using HTML attributes |url=http://intercoolerjs.org/ |access-date=2024-04-24 |website=Intercooler.js |language=en}}{{cite web |last=Fielding |first=Roy T. |date=20 Oct 2008 |title=REST APIs must be hypertext-driven » Untangled |url=https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven}}

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.{{Cite web |title=htmx ~ htmx 1.0.0 has been released! |url=https://htmx.org/posts/2020-11-24-htmx-1-0-0-is-released/ |access-date=2024-04-24 |website=htmx.org}} 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.{{Cite web |title=htmx {{!}} Technology Radar |url=https://www.thoughtworks.com/en-us/radar/languages-and-frameworks/htmx |website=Thoughtworks |language=en-US}}

In 2023, htmx was added to the first cohort of the GitHub Accelerator program, a program the provides open source projects with funding and guidance from members of mature open source projects.{{Cite web |last=Sowles |first=Kara |date=2023-04-12 |title=GitHub Accelerator: our first cohort and what's next |url=https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/ |access-date=2024-04-24 |website=The GitHub Blog |language=en-US}}

htmx combines the capabilities of modern frameworks with the server-side processing of traditional web applications.{{cite web |last=Hibbard |first=James |title=An Introduction to htmx, the HTML-focused Dynamic UI Library |url=https://www.sitepoint.com/htmx-introduction/#whatishtmxandhowdoesitwork. |access-date=2024-04-04 |publisher=SitePoint |publication-date=2023-08-08}} The library's design philosophy revolves around a goal to "complete HTML as a hypertext."{{Cite web |last=Tyson |first=Matthew |date=2023-09-20 |title=Intro to HTMX: Dynamic HTML without JavaScript |url=https://www.infoworld.com/article/2334868/htmx-dynamic-html-without-the-javascript.html |access-date=2024-04-24 |website=InfoWorld |language=en}} By leveraging custom HTML attributes prefixed with hx- to trigger AJAX 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.{{cite web |date=26 October 2023 |title=Introduction to HTMX | refine |url=https://refine.dev/blog/what-is-htmx/}}{{Cite web |last=Tyson |first=Matthew |date=2024-03-13 |title=Complexity bad: An interview with HTMX creator Carson Gross |url=https://www.infoworld.com/article/3713164/complexity-bad-an-interview-with-carson-gross.html |access-date=2024-04-24 |website=InfoWorld |language=en}} This allows the library to avoid issues with large bundles,{{Citation |last=Sheppard |first=Dennis |title=Leveling Up Your PWA |date=2017 |work=Beginning Progressive Web App Development |pages=243–259 |url=http://link.springer.com/10.1007/978-1-4842-3090-9_12 |access-date=2024-04-30 |place=Berkeley, CA |publisher=Apress |language=en |doi=10.1007/978-1-4842-3090-9_12 |isbn=978-1-4842-3089-3|url-access=subscription }} complex state management, and hydration.{{Cite web |title=A First Look at HTMX and How it Compares to React |url=https://www.builder.io/blog/htmx-vs-react |website=Builder.io |language=en}} This approach offers a more accessible and intuitive way to build modern user interfaces while avoiding the complexities often associated with traditional JavaScript frameworks.{{Cite web |title=htmx ~ Essays |url=https://htmx.org/essays/ |access-date=2024-04-30 |website=htmx.org}} 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.{{Cite web |title=htmx ~ Documentation |url=https://htmx.org/docs/#swapping |access-date=2024-04-30 |website=htmx.org}}

The library also challenges the common approach of utilizing JSON as the standard payload for HTTP requests by replacing it with HTML. This is meant to solve the issues related to the performance and cognitive overhead of JSON serialization, 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 from integers and the complexity involved with alternatives to JSON-oriented REST, such as GraphQL or gRPC.{{Cite book |last=Kleppmann |first=Martin |title=Designing Data-Intensive Applications |date=2017-03-01 |publisher=O’Reilly Media |isbn=9781491903100 |edition=1st |location=1005 Gravenstein Highway North, Sebastopol, CA 95472, United States of America |at=JSON, XML, and Binary Variants |language=en-US |chapter=Formats for Encoding Data |type=epub}} 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's JSON type, or be serialized by the backend only to be then deserialized by the frontend again.{{Cite book |last1=Shi |first1=Xuanhua |title=2020 IEEE 36th International Conference on Data Engineering (ICDE) |last2=Zhang |first2=Yipeng |last3=Huang |first3=Hong |last4=Hu |first4=Zhenyu |last5=Jin |first5=Hai |last6=Shen |first6=Huan |last7=Zhou |first7=Yongluan |last8=He |first8=Bingsheng |last9=Li |first9=Ruibo |date=April 2020 |publisher=IEEE |isbn=978-1-7281-2903-7 |pages=1621–1632 |chapter=Maxson: Reduce Duplicate Parsing Overhead on Raw Data |doi=10.1109/ICDE48307.2020.00144 |chapter-url=https://ieeexplore.ieee.org/document/9101499 |last10=Zhou |first10=Keyong}} 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.{{Cite book |last=Eckert |first=Raphael |url=https://t73f.de/hochschule/thesis/2023_eckert.pdf |title=Erstellen eines einfach bedienbaren und einfach implementierbaren UI-Konzepts mit Go und htmx |date=2023-03-23 |publisher=Hochschule Heilbronn |location=Heilbronn |language=de-DE |trans-title=Creating an easy-to-use and easy-to-implement UI concept with Go and htmx}}

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.{{Cite web |last=Jack |first=Bobby |date=2024-01-22 |title=What Is htmx and How Can It Simplify My Website? |url=https://www.makeuseof.com/what-is-htmx-how-simplify-website/ |access-date=2024-09-03 |website=MUO |language=en}} 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.{{Cite web |title=htmx ~ hx-target Attribute |url=https://htmx.org/attributes/hx-target/ |access-date=2024-09-03 |website=htmx.org}}{{Cite web |title=htmx ~ hx-swap Attribute |url=https://htmx.org/attributes/hx-swap/ |access-date=2024-09-03 |website=htmx.org}}

Since its inception as intercooler.js and its subsequent evolution into htmx, the library has gained a significant following within the web development community.{{Cite web |title=@htmx_org |url=https://twitter.com/htmx_org |access-date=2024-05-19 |website=X (formerly Twitter)}}{{Cite web |date=2024-04-17 |title=htmx.org |url=https://www.npmjs.com/package/htmx.org |access-date=2024-04-30 |website=npm |language=en}} htmx has been viewed as a simpler and lighter weight alternative to full-blown JavaScript frameworks like React, Vue.js, and Angular.{{Cite web |last=Tyson |first=Matthew |date=2024-04-01 |title=What's the best JavaScript framework? |url=https://www.infoworld.com/article/3713207/whats-the-best-javascript-framework.html |access-date=2024-05-19 |website=InfoWorld |language=en}}{{Cite book |last=Dale |first=Kyran |title=Data Visualization with Python and JavaScript |date=2022-12-07 |publisher=O'Reilly Media |isbn=9781098111878 |edition=2nd |location=Sebastopol, CA |chapter=Chapter 4. Webdev 101}} 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.{{Cite web |last=Letusheva |first=Valeria |date=2024-05-09 |title=Highlights from the Django Developer Survey 2024 |url=https://www.infoworld.com/article/3715395/highlights-from-the-django-developer-survey-2024.html |access-date=2024-05-19 |website=InfoWorld |language=en}}

htmx integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including Node.js, Django, Flask, Adobe ColdFusion, ASP.NET, Java, Clojure, and Ruby on Rails.{{Cite web |title=htmx ~ Server-Side Examples |url=https://htmx.org/server-examples/ |access-date=2024-05-19 |website=htmx.org}} 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.

{{Portal|Free and open-source software}}

• Comparison of JavaScript-based web frameworks
• React (JavaScript library)

• {{Official website|https://htmx.org/}}
• {{GitHub|bigskysoftware/htmx}}

{{Web frameworks}}

Category:2020 software

Category:JavaScript libraries

Category:Software using the BSD license

Category:JavaScript web frameworks