# htmx

> 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 hypermedia.

The full documentation concatenated into a single file is available at [https://four.htmx.org/docs/full.md](https://four.htmx.org/docs/full.md).

## Documentation

- [Installation](https://four.htmx.org/docs/get-started/installation.md): Install htmx via CDN, npm, or direct download
- [Migration](https://four.htmx.org/docs/get-started/migration.md): Migrate from htmx 2.x to htmx 4.x.
- [Mental Model](https://four.htmx.org/docs/core-concepts/mental-model.md): Learn to think in hypermedia rather than client-side state
- [Hypermedia Controls](https://four.htmx.org/docs/core-concepts/hypermedia-controls.md): Understand the request-response cycle from trigger to swap
- [Requests & Responses](https://four.htmx.org/docs/core-concepts/requests-and-responses.md): Work with HTTP headers and response status codes
- [Client-Side Scripting](https://four.htmx.org/docs/core-concepts/client-scripting.md): Use events and hx-on to integrate JavaScript
- [Multi-Target Updates](https://four.htmx.org/docs/core-concepts/multi-target-updates.md): Update multiple elements from a single response
- [HCON — htmx Configuration Object Notation](https://four.htmx.org/docs/core-concepts/hcon.md): The lightweight config format used throughout htmx attributes
- [CSS Transitions](https://four.htmx.org/docs/features/css-transitions.md): Animate content changes with CSS transitions
- [Synchronization](https://four.htmx.org/docs/features/synchronization.md): Coordinate requests between multiple elements
- [Confirmations](https://four.htmx.org/docs/features/confirmations.md): Require user confirmation before issuing requests
- [Boosting](https://four.htmx.org/docs/features/boosting.md): Convert regular links and forms to use AJAX
- [History](https://four.htmx.org/docs/features/history.md): Integrate with browser history and navigation
- [Validation](https://four.htmx.org/docs/features/validation.md): Validate forms using HTML5 validation APIs
- [Web Components](https://four.htmx.org/docs/features/web-components.md): Use htmx inside Web Components and Shadow DOM
- [Attribute Inheritance](https://four.htmx.org/docs/features/attribute-inheritance.md): Hoist attributes to parents to reduce repetition
- [Extended Selectors](https://four.htmx.org/docs/features/extended-selectors.md): Use CSS selectors extended with relative targeting
- [Extensions](https://four.htmx.org/docs/features/extensions.md): Load, configure, and build htmx extensions.
- [Best Practices](https://four.htmx.org/docs/security/best-practices.md): Protect your htmx application from common attacks
- [Caching](https://four.htmx.org/docs/security/caching.md): Set up HTTP caching for performance
- [Debugging](https://four.htmx.org/docs/troubleshoot/debugging.md): Debug htmx issues with browser dev tools
- [Configuration](https://four.htmx.org/docs/troubleshoot/configuration.md): Configure htmx's global settings and options
- [VS Code](https://four.htmx.org/docs/editors/vscode.md): HTMX Toolkit extension for Visual Studio Code

## Reference

- [hx-get](https://four.htmx.org/reference/attributes/hx-get.md): Issues a GET request to the specified URL
- [hx-post](https://four.htmx.org/reference/attributes/hx-post.md): Issues a POST request to the specified URL
- [hx-put](https://four.htmx.org/reference/attributes/hx-put.md): Issues a PUT request to the specified URL
- [hx-patch](https://four.htmx.org/reference/attributes/hx-patch.md): Issues a PATCH request to the specified URL
- [hx-delete](https://four.htmx.org/reference/attributes/hx-delete.md): Issues a DELETE request to the specified URL
- [hx-trigger](https://four.htmx.org/reference/attributes/hx-trigger.md): Controls when the element issues a request
- [hx-swap](https://four.htmx.org/reference/attributes/hx-swap.md): Controls how the response is inserted
- [hx-target](https://four.htmx.org/reference/attributes/hx-target.md): Controls where the response is inserted
- [hx-select](https://four.htmx.org/reference/attributes/hx-select.md): Controls which part of the response to insert
- [hx-on](https://four.htmx.org/reference/attributes/hx-on.md): Runs inline JavaScript when an event fires
- [hx-vals](https://four.htmx.org/reference/attributes/hx-vals.md): Adds values to request parameters
- [hx-include](https://four.htmx.org/reference/attributes/hx-include.md): Includes additional element values in the request
- [hx-swap-oob](https://four.htmx.org/reference/attributes/hx-swap-oob.md): Marks response elements to swap into the page by ID
- [hx-select-oob](https://four.htmx.org/reference/attributes/hx-select-oob.md): Picks response elements to swap into the page by ID
- [hx-push-url](https://four.htmx.org/reference/attributes/hx-push-url.md): Pushes the URL into browser history
- [hx-replace-url](https://four.htmx.org/reference/attributes/hx-replace-url.md): Replaces the current URL in browser history
- [hx-headers](https://four.htmx.org/reference/attributes/hx-headers.md): Adds custom headers to the request
- [hx-encoding](https://four.htmx.org/reference/attributes/hx-encoding.md): Sets the request encoding type
- [hx-indicator](https://four.htmx.org/reference/attributes/hx-indicator.md): Specifies the loading indicator element
- [hx-boost](https://four.htmx.org/reference/attributes/hx-boost.md): Converts links and forms to AJAX
- [hx-sync](https://four.htmx.org/reference/attributes/hx-sync.md): Synchronizes requests between elements
- [hx-confirm](https://four.htmx.org/reference/attributes/hx-confirm.md): Shows a confirmation dialog before the request
- [hx-validate](https://four.htmx.org/reference/attributes/hx-validate.md): Validates before submitting the request
- [hx-disable](https://four.htmx.org/reference/attributes/hx-disable.md): Disables elements during the request
- [hx-ignore](https://four.htmx.org/reference/attributes/hx-ignore.md): Disables htmx processing for the element
- [hx-preserve](https://four.htmx.org/reference/attributes/hx-preserve.md): Preserves the element during swaps
- [hx-preload](https://four.htmx.org/reference/attributes/hx-preload.md): Preloads content before the user triggers a request
- [hx-optimistic](https://four.htmx.org/reference/attributes/hx-optimistic.md): Shows optimistic content during the request
- [hx-status](https://four.htmx.org/reference/attributes/hx-status.md): Handles responses differently by status code
- [hx-action](https://four.htmx.org/reference/attributes/hx-action.md): Specifies the URL to receive the request
- [hx-method](https://four.htmx.org/reference/attributes/hx-method.md): Specifies the HTTP method for the request
- [hx-config](https://four.htmx.org/reference/attributes/hx-config.md): Configures request behavior with JSON
- [hx-history-elt](https://four.htmx.org/reference/attributes/hx-history-elt.md): Marks the element to swap on history restore
- [HX-Request](https://four.htmx.org/reference/headers/HX-Request.md): Indicates a request was made by htmx
- [HX-Request-Type](https://four.htmx.org/reference/headers/HX-Request-Type.md): Indicates if this is a partial or full page request
- [HX-Current-URL](https://four.htmx.org/reference/headers/HX-Current-URL.md): Contains the URL of the browser when the request was made
- [HX-Source](https://four.htmx.org/reference/headers/HX-Source.md): Identifies the element that triggered the request
- [HX-Target](https://four.htmx.org/reference/headers/HX-Target.md): The element that will receive the response
- [HX-Boosted](https://four.htmx.org/reference/headers/HX-Boosted.md): Indicates a boosted navigation request
- [HX-History-Restore-Request](https://four.htmx.org/reference/headers/HX-History-Restore-Request.md): Indicates history navigation (back/forward)
- [Accept](https://four.htmx.org/reference/headers/Accept.md): Content types htmx accepts from the server
- [Last-Event-ID](https://four.htmx.org/reference/headers/Last-Event-ID.md): Last received SSE event ID for reconnection
- [HX-Trigger](https://four.htmx.org/reference/headers/HX-Trigger.md): Trigger client-side events from the server
- [HX-Location](https://four.htmx.org/reference/headers/HX-Location.md): Client-side AJAX navigation to a new URL
- [HX-Redirect](https://four.htmx.org/reference/headers/HX-Redirect.md): Client-side redirect to a new URL
- [HX-Refresh](https://four.htmx.org/reference/headers/HX-Refresh.md): Trigger a full page reload
- [HX-Retarget](https://four.htmx.org/reference/headers/HX-Retarget.md): Override the swap target from the server
- [HX-Reswap](https://four.htmx.org/reference/headers/HX-Reswap.md): Override the swap style from the server
- [HX-Reselect](https://four.htmx.org/reference/headers/HX-Reselect.md): Override the content selection from the server
- [HX-Replace-Url](https://four.htmx.org/reference/headers/HX-Replace-Url.md): Replace the current URL in the browser history
- [HX-Push-Url](https://four.htmx.org/reference/headers/HX-Push-Url.md): Push a URL into the browser history stack
- [htmx:config:request](https://four.htmx.org/reference/events/htmx-config-request.md): Configure request before it's sent
- [htmx:before:request](https://four.htmx.org/reference/events/htmx-before-request.md): Immediately before fetch is called
- [htmx:after:request](https://four.htmx.org/reference/events/htmx-after-request.md): After response is received
- [htmx:finally:request](https://four.htmx.org/reference/events/htmx-finally-request.md): At the end of request lifecycle
- [htmx:before:swap](https://four.htmx.org/reference/events/htmx-before-swap.md): Before content is swapped into DOM
- [htmx:after:swap](https://four.htmx.org/reference/events/htmx-after-swap.md): After content is swapped into DOM
- [htmx:before:cleanup](https://four.htmx.org/reference/events/htmx-before-cleanup.md): Before htmx removes element data
- [htmx:after:cleanup](https://four.htmx.org/reference/events/htmx-after-cleanup.md): After listeners and data are removed
- [htmx:confirm](https://four.htmx.org/reference/events/htmx-confirm.md): Show confirmation dialog before request
- [htmx:error](https://four.htmx.org/reference/events/htmx-error.md): When an error occurs during request
- [htmx:abort](https://four.htmx.org/reference/events/htmx-abort.md): Trigger to abort an ongoing request
- [htmx:before:init](https://four.htmx.org/reference/events/htmx-before-init.md): Before a specific element is initialized
- [htmx:after:init](https://four.htmx.org/reference/events/htmx-after-init.md): After an element is fully initialized
- [htmx:before:process](https://four.htmx.org/reference/events/htmx-before-process.md): Before htmx processes a DOM node
- [htmx:after:process](https://four.htmx.org/reference/events/htmx-after-process.md): After htmx processes a DOM node
- [htmx:process:{type}](https://four.htmx.org/reference/events/htmx-process-type.md): Custom template processing
- [htmx:after:implicitInheritance](https://four.htmx.org/reference/events/htmx-after-implicitInheritance.md): After implicit inheritance is applied
- [htmx:before:history:update](https://four.htmx.org/reference/events/htmx-before-history-update.md): Before browser history is updated
- [htmx:after:history:update](https://four.htmx.org/reference/events/htmx-after-history-update.md): After browser history is updated
- [htmx:after:history:push](https://four.htmx.org/reference/events/htmx-after-push-into-history.md): After a push state action
- [htmx:after:history:replace](https://four.htmx.org/reference/events/htmx-after-replace-into-history.md): After a replace state action
- [htmx:before:history:restore](https://four.htmx.org/reference/events/htmx-before-restore-history.md): Before restoring from history
- [htmx:before:viewTransition](https://four.htmx.org/reference/events/htmx-before-viewTransition.md): Before View Transition API starts
- [htmx:after:viewTransition](https://four.htmx.org/reference/events/htmx-after-viewTransition.md): After View Transition completes
- [load](https://four.htmx.org/reference/events/load.md): Fired immediately after initialization
- [intersect](https://four.htmx.org/reference/events/intersect.md): Element enters viewport
- [every](https://four.htmx.org/reference/events/every.md): Periodic polling trigger
- [htmx:before:response](https://four.htmx.org/reference/events/htmx-before-response.md): After a response is received but before the body is consumed
- [htmx:before:settle](https://four.htmx.org/reference/events/htmx-before-settle.md): Before the settle phase begins after a swap
- [htmx:after:settle](https://four.htmx.org/reference/events/htmx-after-settle.md): After the settle phase completes
- [htmx:response:error](https://four.htmx.org/reference/events/htmx-response-error.md): When an HTTP error status (4xx/5xx) is received
- [htmx.config](https://four.htmx.org/reference/config/htmx-config.md): Configure htmx behavior globally
- [htmx.config.defaultSwap](https://four.htmx.org/reference/config/htmx-config-defaultSwap.md): Default swap style for responses
- [htmx.config.defaultTimeout](https://four.htmx.org/reference/config/htmx-config-defaultTimeout.md): Default timeout for requests in milliseconds
- [htmx.config.extensions](https://four.htmx.org/reference/config/htmx-config-extensions.md): Comma-separated list of extensions to load
- [htmx.config.history](https://four.htmx.org/reference/config/htmx-config-history.md): Control htmx browser history management
- [htmx.config.implicitInheritance](https://four.htmx.org/reference/config/htmx-config-implicitInheritance.md): Enable implicit attribute inheritance
- [htmx.config.includeIndicatorCSS](https://four.htmx.org/reference/config/htmx-config-includeIndicatorCSS.md): Include default indicator CSS
- [htmx.config.indicatorClass](https://four.htmx.org/reference/config/htmx-config-indicatorClass.md): CSS class for loading indicators
- [htmx.config.logAll](https://four.htmx.org/reference/config/htmx-config-logAll.md): Log all htmx events to console
- [htmx.config.mode](https://four.htmx.org/reference/config/htmx-config-mode.md): Set request mode for fetch API
- [htmx.config.morphIgnore](https://four.htmx.org/reference/config/htmx-config-morphIgnore.md): Attributes to ignore during morphing
- [htmx.config.morphSkip](https://four.htmx.org/reference/config/htmx-config-morphSkip.md): Skip morphing for specific elements
- [htmx.config.morphSkipChildren](https://four.htmx.org/reference/config/htmx-config-morphSkipChildren.md): Skip morphing children of specific elements
- [htmx.config.noSwap](https://four.htmx.org/reference/config/htmx-config-noSwap.md): HTTP status codes that skip swap
- [htmx.config.prefix](https://four.htmx.org/reference/config/htmx-config-prefix.md): Set a secondary attribute prefix
- [htmx.config.requestClass](https://four.htmx.org/reference/config/htmx-config-requestClass.md): CSS class applied during requests
- [htmx.config.transitions](https://four.htmx.org/reference/config/htmx-config-transitions.md): Enable View Transitions API support
- [htmx.version](https://four.htmx.org/reference/config/htmx-config-version.md): Current htmx version (read-only)
- [htmx.config.defaultFocusScroll](https://four.htmx.org/reference/config/htmx-config-defaultFocusScroll.md): Scroll to the focused element after a swap
- [htmx.config.defaultSettleDelay](https://four.htmx.org/reference/config/htmx-config-defaultSettleDelay.md): Delay between the swap and settle phases in milliseconds
- [htmx.config.inlineScriptNonce](https://four.htmx.org/reference/config/htmx-config-inlineScriptNonce.md): Nonce value added to inline scripts generated by htmx
- [htmx.config.morphScanLimit](https://four.htmx.org/reference/config/htmx-config-morphScanLimit.md): Maximum number of siblings scanned when matching elements during morphing
- [htmx.config.metaCharacter](https://four.htmx.org/reference/config/htmx-config-metaCharacter.md): Custom character used instead of `:` for attribute modifiers
- [htmx.ajax()](https://four.htmx.org/reference/methods/htmx-ajax.md): Issues an htmx-style ajax request
- [htmx.find()](https://four.htmx.org/reference/methods/htmx-find.md): Find first matching element
- [htmx.findAll()](https://four.htmx.org/reference/methods/htmx-findAll.md): Find all matching elements
- [htmx.on()](https://four.htmx.org/reference/methods/htmx-on.md): Listen for htmx events
- [htmx.onLoad()](https://four.htmx.org/reference/methods/htmx-onLoad.md): Execute callback when elements are loaded
- [htmx.parseInterval()](https://four.htmx.org/reference/methods/htmx-parseInterval.md): Parse time intervals to milliseconds
- [htmx.process()](https://four.htmx.org/reference/methods/htmx-process.md): Process htmx attributes on element
- [htmx.registerExtension()](https://four.htmx.org/reference/methods/htmx-registerExtension.md): Register htmx extension
- [htmx.timeout()](https://four.htmx.org/reference/methods/htmx-timeout.md): Create a timeout promise
- [htmx.trigger()](https://four.htmx.org/reference/methods/htmx-trigger.md): Trigger custom events
- [htmx.swap()](https://four.htmx.org/reference/methods/htmx-swap.md): Perform an HTML content swap into the DOM

## Patterns

- [Click to Load](https://four.htmx.org/patterns/loading/click-to-load.md): Load more items when you click a button
- [Infinite Scroll](https://four.htmx.org/patterns/loading/infinite-scroll.md): Load content when you scroll to bottom
- [Lazy Load](https://four.htmx.org/patterns/loading/lazy-load.md): Load content after the page renders
- [Progress Bar](https://four.htmx.org/patterns/loading/progress-bar.md): Show progress bar during background job
- [Active Search](https://four.htmx.org/patterns/forms/active-search.md): Filter search results as you type
- [Active Validation](https://four.htmx.org/patterns/forms/active-validation.md): Validate form input as you type
- [File Upload](https://four.htmx.org/patterns/forms/file-upload.md): Upload files with progress and validation
- [Linked Selects](https://four.htmx.org/patterns/forms/linked-selects.md): Update select options via another select
- [Reset on Submit](https://four.htmx.org/patterns/forms/reset-on-submit.md): Clear form inputs after submission
- [Bulk Actions](https://four.htmx.org/patterns/records/bulk-actions.md): Perform actions on multiple records
- [Delete in Place](https://four.htmx.org/patterns/records/delete-in-place.md): Remove a record without page refresh
- [Drag to Reorder](https://four.htmx.org/patterns/records/drag-to-reorder.md): Change order of records with drag and drop
- [Edit in Place](https://four.htmx.org/patterns/records/edit-in-place.md): Update a record without page refresh
- [Animations](https://four.htmx.org/patterns/display/animations.md): Animate content as it swaps in
- [Dialogs](https://four.htmx.org/patterns/display/dialogs.md): Show modals and popups on demand
- [Tabs](https://four.htmx.org/patterns/display/tabs.md): Switch between content panels using tabs
- [Bidirectional Sync](https://four.htmx.org/patterns/real-time/bidirectional-sync.md): Exchange data in real-time with server
- [Continuous Streams](https://four.htmx.org/patterns/real-time/continuous-streams.md): Push updates to page via persistent connection
- [One-Off Streams](https://four.htmx.org/patterns/real-time/one-off-streams.md): Stream incremental updates until completion
- [Polling](https://four.htmx.org/patterns/real-time/polling.md): Check for updates at regular intervals
- [Keyboard Shortcuts](https://four.htmx.org/patterns/advanced/keyboard-shortcuts.md): Bind keyboard shortcuts to interactive elements
- [Multiple Swaps](https://four.htmx.org/patterns/advanced/update-other-content.md): Update multiple elements on the page at once

## Essays

- [Yes, and...](https://four.htmx.org/essays/yes-and.md): In this essay, Carson Gross discusses his advice to young people interested in computer science worried about the future given the advancements in AI.
- [Building Critical Infrastructure with htmx: Network Automation for the Paris 2024 Olympics](https://four.htmx.org/essays/paris-2024-olympics-htmx-network-automation.md): Building critical software infrastructure with htmx, and how the simplification induced by this approach is interesting for AI-assisted development.
- [The fetch()ening](https://four.htmx.org/essays/the-fetchening.md): You know, technically, I never said anything about a version four
- [Vendoring](https://four.htmx.org/essays/vendoring.md): Carson Gross explores the concept of 'vendoring' in software development, where external project sources are copied directly into a project. He covers the benefits of vendoring, such as improved visibility and control over dependencies, and discusses challenges like transitive dependencies and the culture of dependency in modern software development. He also contrasts vendoring with modern dependency management tools, and considers the potential for vendor-first dependency managers to combine the strengths of both approaches. He encourages a rethinking of dependencies and promotes a more independent approach to software development.
- [Alternatives to htmx](https://four.htmx.org/essays/alternatives.md): In this article, Carson Gross compares several alternative libraries and frameworks to htmx that embrace a hypermedia-oriented approach to web development. Carson explores established solutions like Unpoly and Hotwire Turbo, as well as emerging projects like Triptych and htmz, providing developers with a comprehensive overview of hypermedia-driven application development options beyond htmx.
- [A Real World wasm to htmx Port](https://four.htmx.org/essays/a-real-world-wasm-to-htmx-port.md): In this article, Joe Fioti describes their journey of simplifying their web application architecture by moving from a complex WebAssembly-based system to a streamlined htmx solution, resulting in significantly reduced code complexity and improved development efficiency.
- [The future of htmx](https://four.htmx.org/essays/future.md): In this essay, Carson Gross and Alex Petros discuss htmx's future direction and philosophy. They explain how the project aims to emulate jQuery's success through API stability, minimal feature additions, and quarterly releases while continuing to promote hypermedia-driven development and support the broader web development ecosystem.
- [htmx lore](https://four.htmx.org/essays/lore.md): Carson Gross explores the fascinating lore of htmx, from its playful community memes like "It's So Over/We're So Back" and "Laser Eye Horse" to humorous controversies such as the "Microsoft Purchase Rumor" and the htmx/intercooler.js feud. This essay dives into the vibrant culture, iconic moments, and lighthearted chaos surrounding htmx.
- [Prefer If Statements To Polymorphism...](https://four.htmx.org/essays/prefer-if-statements.md): In this collection of tweets, Carson Gross explores unconventional programming principles, including favoring if statements over polymorphism, minimizing abstractions, and prioritizing practical, implementation-driven development. He challenges traditional software 01-frontend norms, advocating for simplicity, locality, and utility over complexity and abstraction.
- [Codin' Dirty](https://four.htmx.org/essays/codin-dirty.md): In this article, Carson Gross discusses an alternative approach to software development that challenges the principles outlined in 'Clean Code.' Carson advocates for allowing larger functions in certain cases, preferring integration tests over unit tests, and minimizing the number of classes and interfaces. He shares examples from successful software projects that demonstrate these practices can lead to maintainable, high-quality code.
- [Web Components Work Great with htmx](https://four.htmx.org/essays/webcomponents-work-great.md): This essay by Alexander Petros explores how Web Components can be integrated seamlessly with htmx, a library that enables dynamic web pages through HTML. It discusses the flexibility of htmx in handling interactive elements like Web Components alongside traditional server-driven approaches, such as multi-page apps. By using the example of an editable carnival ride table, Alexander demonstrates how Web Components simplify functionality without the need for heavy JavaScript frameworks, highlighting their compatibility with htmx's DOM-based lifecycle. Alexander also addresses potential challenges and how htmx manages them efficiently.
- [Next.js to htmx — A Real World Example](https://four.htmx.org/essays/a-real-world-nextjs-to-htmx-port.md): In this case study, Pouria Ezzati examines how migrating a URL shortener from Next.js to htmx resulted in significant improvements in codebase size, dependencies, and developer experience while challenging assumptions about modern web frameworks.
- [Why Gumroad Didn't Choose htmx](https://four.htmx.org/essays/why-gumroad-didnt-choose-htmx.md): In this essay, Sahil Lavingia, CEO of Gumroad, explains why the company decided against using htmx for its new project, Helper, in favor of React and Next.js. He shares the challenges faced with htmx, including issues with developer experience, user experience limitations, scalability, and AI tool support. While acknowledging htmx's potential for simpler projects, Lavingia emphasizes how React and Next.js offered better solutions for complex features like real-time collaboration, drag-and-drop functionality, and dynamic forms. Ultimately, Lavingia highlights the importance of selecting technologies that can grow with the project's needs.
- [You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths](https://four.htmx.org/essays/you-cant.md): Tony Alaribe challenges common myths about multi-page applications (MPAs) and explores how modern browser technologies can enable fast, interactive, and offline-capable web applications without relying on single-page application (SPA) frameworks. Alaribe discusses advancements in service workers, caching, and cross-document transitions, offering insights into building efficient MPAs. By debunking myths like slow page transitions and the necessity of JavaScript-heavy frameworks, Alaribe highlights how developers can leverage HTML, CSS, and minimal JavaScript to create robust, user-friendly web apps in 2024.
- [Web Security Basics (with htmx)](https://four.htmx.org/essays/web-security-basics-with-htmx.md): This guide by Alexander Petros provides essential web security best practices for building applications with htmx, focusing on safe handling of dynamic, user-generated content. It covers fundamental principles such as using only trusted routes, employing auto-escaping template engines, and securing cookies to prevent common vulnerabilities like Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF). Aimed at developers familiar with backend server construction, it emphasizes security techniques that are easy to implement and crucial for protecting user data in dynamic web applications.
- [htmx sucks](https://four.htmx.org/essays/htmx-sucks.md): This article provides a critical analysis of htmx, a web development library, explaining why the author believes it represents a problematic approach to modern web development due to its outdated coding practices, lack of build tools, absence of TypeScript support, and reliance on HTML-based architecture, while also questioning the professionalism of its creator.
- [Model/View/Controller (MVC)](https://four.htmx.org/essays/mvc.md): Carson Gross give an introduction to the Model/View/Controller (MVC) 01-frontend pattern and its relevance to modern web development. He explores MVC concepts, its historical adoption in frameworks like Ruby on Rails, and practical examples of its implementation in Python with Flask. Carson explains how separating concerns with MVC can reduce code duplication, support both JSON APIs and hypermedia, and maintain flexibility in application 01-frontend.
- [Is htmx Just Another JavaScript Framework?](https://four.htmx.org/essays/is-htmx-another-javascript-framework.md): Alexander Petros give a thoughtful exploration of htmx's relationship to traditional JavaScript frameworks, examining how its HTML-first approach and narrow focus on network requests sets it apart. He argues that while htmx exhibits framework-like qualities in how it shapes application architecture, its deep integration with HTML's native capabilities and lack of dependencies makes it a more sustainable choice for building long-lasting web applications.
- [Why I Tend Not To Use Content Negotiation](https://four.htmx.org/essays/why-tend-not-to-use-content-negotiation.md): In this essay, Carson Gross explores his preference for separating JSON and hypermedia APIs instead of using content negotiation, a feature in HTTP that allows clients to request different formats (e.g., HTML, JSON). He discusses the limitations of content negotiation in APIs, especially when mixing stable, versioned JSON data APIs with dynamic, UI-driven hypermedia APIs. Carson argues that by splitting these concerns into distinct APIs, developers can better maintain stability for data APIs while allowing flexibility for hypermedia APIs to evolve with user interface needs. He also highlights the challenges content negotiation introduces to API 01-frontend and scalability.
- [Does Hypermedia Scale?](https://four.htmx.org/essays/does-hypermedia-scale.md): In this essay, Carson Gross examines whether Hypermedia-Driven Applications (HDAs) can effectively scale across different dimensions of software development, including system nodes, application performance, feature count, feature complexity, and team size. The analysis explores both the strengths and limitations of hypermedia in each context, ultimately demonstrating that HDAs can scale well in most scenarios while acknowledging specific challenges with complex client-side features.
- [The #ViewSource Affordance](https://four.htmx.org/essays/right-click-view-source.md): In this essay, Carson Gross explores the significance of the #ViewSource affordance in preserving the open, collaborative culture of the early web. He examines the impact of digital and technical enclosure on this culture, highlights the importance of developer decisions in maintaining openness, and advocates for prioritizing #ViewSource-friendly practices in modern web development.
- [Another Real World React -> htmx Port](https://four.htmx.org/essays/another-real-world-react-to-htmx-port.md): In this article, Carson Gross summarizes a real-world case study of Adrian McPhee porting the OpenUnited platform from React to htmx, documenting significant reductions in code complexity and development time while highlighting how content-focused web applications can benefit from a hypermedia architectural approach.
- [Why htmx Does Not Have a Build Step](https://four.htmx.org/essays/no-build-step.md): In this essay, Alexander Petros explores the reasons why the htmx JavaScript library does not include a build step, detailing the benefits of its simple, dependency-free structure. He highlights the longevity of plain JavaScript, the improved debugging experience, enforced code clarity, and the tradeoffs of avoiding tools like TypeScript or ES6. Alexander also acknowledges the potential limitations of this approach and discusses how these tradeoffs align with htmx's goals of simplicity and developer choice in web development.
- [REST Copypasta](https://four.htmx.org/essays/rest-copypasta.md): These page provides some pre-written critiques of the common misuse of the term 'REST' in modern web development, contrasting it with the true REST architecture defined by Roy Fielding. Copy these ready-made responses to helpfully explain how JSON/RPC is often mislabeled as REST and highlight the role of hypermedia and API specifications in defining REST-ful systems. You will surely not make any enemies or regret posting these responses in any way.
- [Hypermedia On Whatever you'd Like](https://four.htmx.org/essays/hypermedia-on-whatever-youd-like.md): In this essay, Carson Gross explores the concept of 'The HOWL Stack' (Hypermedia On Whatever you'd Like) and argues that using a hypermedia-driven approach for web applications allows developers to choose their preferred server-side technology, freeing them from the pressure to use JavaScript throughout their entire stack while maintaining modern web functionality through HTML and hypermedia enhancements.
- [View Transitions](https://four.htmx.org/essays/view-transitions.md): Carson Gross explores the evolution of web applications and the significance of view transitions in improving user experience. He discusses the limitations of traditional web 01-frontend, where full-page refreshes create an unpleasant experience, and how modern technologies like CSS transitions and the View Transition API aim to enhance aesthetic smoothness. Carson explains how htmx leverages the View Transition API to bring seamless transitions to hypermedia-driven applications, offering an alternative to single-page applications (SPAs) and highlighting its potential once widely available in HTML.
- [Architectural Sympathy](https://four.htmx.org/essays/architectural-sympathy.md): In this essay, Carson Gross explores architectural sympathy as a software 01-frontend principle where new software adopts and conforms to the architectural patterns of existing systems. Carson examines the application of architectural sympathy in web development through htmx, its advantages and tradeoffs, and drawing parallels with medieval cathedral construction to illustrate the balance between innovation and coherent 01-frontend.
- [Hypermedia Clients](https://four.htmx.org/essays/hypermedia-clients.md): In this essay, Carson Gross explores the critical but often overlooked role of hypermedia clients in REST architectures. He explains why adding hypermedia controls to JSON APIs is insufficient for true RESTful systems without proper client implementation. Carson examines the challenges of building hypermedia clients and argues that web browsers remain the most practical choice for hypermedia-driven applications.
- [Hypermedia-Friendly Scripting](https://four.htmx.org/essays/hypermedia-friendly-scripting.md): In this essay, Carson Gross discusses hypermedia-friendly scripting approaches for web applications, explaining how to incorporate JavaScript while maintaining REST architectural principles and HATEOAS (Hypermedia as the Engine of Application State). Carson outlines key guidelines for using scripting to enhance hypermedia-driven applications without undermining their fundamental REST-ful architecture, covering topics like client-side state management, event communication, and the islands architecture pattern.
- [When Should You Use Hypermedia?](https://four.htmx.org/essays/when-to-use-hypermedia.md): This essay by Carson Gross explores when to use hypermedia in web development, highlighting its advantages and trade-offs. Carson discusses scenarios where hypermedia is a good fit, such as text and image-heavy UIs, CRUD applications, and nested UIs with well-defined areas. He also addresses when hypermedia may not be ideal, including situations with frequent UI state updates, offline requirements, or dynamic interdependencies. Using a 'Transitional' approach (as suggested by Rich Harris), Carson advocates for combining hypermedia with other strategies to optimize web application development, emphasizing its practical benefits and alignment with the web's architecture.
- [A Real World React -> htmx Port](https://four.htmx.org/essays/a-real-world-react-to-htmx-port.md): David Guillot at Contexte gave what we are calling 'The Mother of All htmx Demos' at DjangoCon 2022. This essay summarizes this real-world case study of replacing React with htmx in a SaaS product, demonstrating significant improvements in code size, performance, and development team efficiency through the adoption of a hypermedia-driven architecture.
- [Template Fragments](https://four.htmx.org/essays/template-fragments.md): In this essay, Carson Gross explores the concept of template fragments, a feature in server-side rendering (SSR) that allows partial rendering of content within templates. He highlights the benefits of using template fragments in hypermedia-driven applications, providing a cleaner and more maintainable approach compared to traditional template decomposition. Carson showcases the use of template fragments in the Chill templating language and discusses how this feature improves the developer experience when working with htmx and other hypermedia-oriented libraries. He also includes examples and known implementations of template fragments in various programming languages.
- [How Did REST Come To Mean The Opposite of REST?](https://four.htmx.org/essays/how-did-rest-come-to-mean-the-opposite-of-rest.md): In this article, Carson Gross explores how the term REST (Representational State Transfer) evolved to mean nearly the opposite of its original definition in modern web development. It traces how REST, originally defined by Roy Fielding to describe the web's architecture of hypermedia-driven interactions, came to be widely misused as a term for JSON-based APIs that lack the key hypermedia constraints that define true REST architectural style.
- [10 Tips For Building SSR/HDA applications](https://four.htmx.org/essays/tips-for-SSR-HDA-apps.md): In this guide, Carson Gross provides ten practical tips to help developers transition from Single Page Applications (SPAs) to Server-Side Rendering and Hypermedia-Driven Applications, focusing on essential mindset shifts and architectural advantages.
- [Two Approaches To Decoupling](https://four.htmx.org/essays/two-approaches-to-decoupling.md): Carson Gross explores two different approaches to decoupling in web applications: decoupling at the application level using a JSON Data API and decoupling at the network architecture level using a hypermedia API. He discusses the trade-offs between the two methods, highlighting how a hypermedia API, despite introducing tighter coupling at the application level, offers greater resilience to change at the system level. Carson also touches on the limitations of each approach and discusses strategies like GraphQL and splitting APIs to address specific challenges in web development.
- [Hypermedia-Driven Applications](https://four.htmx.org/essays/hypermedia-driven-applications.md): In this essay, Carson Gross explains the Hypermedia-Driven Application (HDA) architecture, which combines the simplicity of traditional Multi-Page Applications with the enhanced user experience of Single-Page Applications by extending HTML infrastructure through declarative syntax and hypermedia-based server interactions.
- [A Response To "Have Single-Page Apps Ruined the Web?"](https://four.htmx.org/essays/a-response-to-rich-harris.md): In this essay, Carson Gross gives an analysis of Rich Harris's talk 'Have Single-Page Apps Ruined the Web?', exploring the debate between Single-Page Applications (SPAs) and Multi-Page Applications (MPAs). Carson examines Harris's criticisms of both approaches and proposes hypermedia-oriented solutions using htmx, while discussing the broader implications for web development architecture and the future role of JavaScript in web applications.
- [HATEOAS](https://four.htmx.org/essays/hateoas.md): In this essay, Carson Gross explores HATEOAS (Hypermedia as the Engine of Application State), explaining how it enables REST APIs through hypermedia responses and contrasting it with modern JSON-based APIs. Using clear HTML examples, Carson demonstrates how HATEOAS allows clients to discover available actions dynamically through hypermedia rather than requiring prior knowledge of the API interface.
- [Splitting Your Data & Application APIs: Going Further](https://four.htmx.org/essays/splitting-your-apis.md): If you split your API into Data and Application APIs, you should consider changing your Application API from JSON to Hypermedia (HTML) and using a hypermedia-oriented library like htmx to reap the benefits of the hypermedia model (simplicity, reliability, and flexibility).
- [Hypermedia APIs vs. Data APIs](https://four.htmx.org/essays/hypermedia-apis-vs-data-apis.md): In this essay, Carson Gross explores the fundamental differences between hypermedia APIs and data APIs, He explains how hypermedia APIs, which return HTML over HTTP, can embrace frequent changes due to their self-describing nature, while data APIs require more stability and versioning to avoid breaking client code. Carson argues that these distinct characteristics should inform different 01-frontend approaches for each type of API.
- [REST - Explained For Beginners](https://four.htmx.org/essays/rest-explained.md): In this essay, Carson Gross presents the core concepts of REST (Representational State Transfer) explained in simple terms for beginners. He breaks down Roy Fielding's dissertation to highlight key principles like the Uniform Interface, Statelessness, Hypermedia (HATEOAS), and more, making REST easy to understand for non-academic web developers.
- [Complexity Budget](https://four.htmx.org/essays/complexity-budget.md): In this essay, Carson Gross explores the concept of a complexity budget in software development. He discusses how managing complexity across applications is a critical responsibility for architects and developers, while examining strategies for effective complexity management and the challenges that arise when attempting to reduce it.
- [SPA Alternative](https://four.htmx.org/essays/spa-alternative.md): In this essay, Carson Gross explores alternatives to Single Page Applications (SPAs), advocating for an 'HTML-Centric' development approach. He highlights the drawbacks of SPA complexity and the benefits of embracing HTML as the core medium for web development, offering a simpler, more efficient way to build applications without sacrificing interactivity. Carson discusses how tools like htmx enhance HTML's capabilities and encourages developers to reconsider the dominant SPA paradigm with technical bravery.
- [Locality of Behaviour (LoB)](https://four.htmx.org/essays/locality-of-behaviour.md): Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs between LoB and other software 01-frontend principles like DRY and SoC, offering insights on balancing clarity, abstraction, and maintainability in modern development.

## Interviews

- [An interview with Leonard Richardson](https://four.htmx.org/interviews/leonard-richardson.md): In this interview, Leonard Richardson, creator of the Richardson Maturity Model for RESTful web services discusses the history of REST, interoperability in APIs and his impression of newer approaches such as GraphQL.
- [An interview with Chris Wanstrath aka @defunkt, Creator of pjax](https://four.htmx.org/interviews/chris-wanstrath.md): This article features an in-depth interview with Chris Wanstrath (defunkt), the co-founder of GitHub and creator of pjax, where he discusses his journey from early web development to creating pjax, an innovative JavaScript library that helped bridge the gap between traditional web navigation and dynamic content loading.
- [An interview with Makinde Adeagbo, Creator of Primer](https://four.htmx.org/interviews/makinde-adeagbo.md): In this interview with software engineer Makinde Adeagbo, he discusses his role in creating Primer, a hypermedia-oriented JavaScript library used at Facebook in the 2000s, and shares insights about building developer tools, Facebook's evolution, and the cyclical nature of web development approaches.
- [An interview with Mike Amundsen, Author of 'RESTful Web APIs'](https://four.htmx.org/interviews/mike-amundsen.md): In this in-depth interview, Mike Amundsen, a leading expert on REST and hypermedia, discusses the evolution of hypermedia technologies, highlights unsung pioneers like Paul Otlet, and shares insights on the future of hypermedia in enterprise systems and machine-to-machine interactions.
- [An interview with Henning Koch, Creator of Unpoly](https://four.htmx.org/interviews/henning-koch.md): In this interview with Henning Koch, creator of Unpoly, he discusses his journey from managing a Rails consultancy to developing this hypermedia-oriented JavaScript library. Koch shares insights on progressive enhancement, the challenges of Single Page Applications, and why hypermedia approaches often deliver better results for typical web applications.