Examples

#Server-side Integration Examples

A list of GitHub repositories showing examples of integration with a wide variety of server-side languages and platforms, including JavaScript, Python, Java, and many others.

#UI Examples

Below are a set of UX patterns implemented in htmx with minimal HTML and styling.

You can copy and paste them and then adjust them for your needs.

PatternDescription
Click To EditDemonstrates inline editing of a data object
Bulk UpdateDemonstrates bulk updating of multiple rows of data
Click To LoadDemonstrates clicking to load more rows in a table
Delete RowDemonstrates row deletion in a table
Edit RowDemonstrates how to edit rows in a table
Lazy LoadingDemonstrates how to lazy load content
Inline ValidationDemonstrates how to do inline field validation
Infinite ScrollDemonstrates infinite scrolling of a page
Active SearchDemonstrates the active search box pattern
Progress BarDemonstrates a job-runner like progress bar
Value SelectDemonstrates making the values of a select dependent on another select
AnimationsDemonstrates various animation techniques
File UploadDemonstrates how to upload a file via ajax with a progress bar
Preserving File Inputs after Form ErrorsDemonstrates how to preserve file inputs after form errors
Dialogs - BrowserDemonstrates the prompt and confirm dialogs
Dialogs - UIKitDemonstrates modal dialogs using UIKit
Dialogs - BootstrapDemonstrates modal dialogs using Bootstrap
Dialogs - CustomDemonstrates modal dialogs from scratch
Tabs (Using HATEOAS)Demonstrates how to display and select tabs using HATEOAS principles
Tabs (Using JavaScript)Demonstrates how to display and select tabs using JavaScript
Keyboard ShortcutsDemonstrates how to create keyboard shortcuts for htmx enabled elements
Drag & Drop / SortableDemonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering
Updating Other ContentDemonstrates how to update content beyond just the target elements
ConfirmDemonstrates how to implement a custom confirmation dialog with htmx
Async AuthenticationDemonstrates how to handle async authentication tokens in htmx
Web ComponentsDemonstrates how to integrate htmx with web components and shadow DOM
(Experimental) moveBefore()-powered hx-preservehtmx will use the experimental moveBefore() API for moving elements, if it is present.

#Migrating from Hotwire / Turbo ?

For common practices see the Hotwire / Turbo to htmx Migration Guide.