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.
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.
| Pattern | Description |
|---|---|
| Click To Edit | Demonstrates inline editing of a data object |
| Bulk Update | Demonstrates bulk updating of multiple rows of data |
| Click To Load | Demonstrates clicking to load more rows in a table |
| Delete Row | Demonstrates row deletion in a table |
| Edit Row | Demonstrates how to edit rows in a table |
| Lazy Loading | Demonstrates how to lazy load content |
| Inline Validation | Demonstrates how to do inline field validation |
| Infinite Scroll | Demonstrates infinite scrolling of a page |
| Active Search | Demonstrates the active search box pattern |
| Progress Bar | Demonstrates a job-runner like progress bar |
| Value Select | Demonstrates making the values of a select dependent on another select |
| Animations | Demonstrates various animation techniques |
| File Upload | Demonstrates how to upload a file via ajax with a progress bar |
| Preserving File Inputs after Form Errors | Demonstrates how to preserve file inputs after form errors |
| Dialogs - Browser | Demonstrates the prompt and confirm dialogs |
| Dialogs - UIKit | Demonstrates modal dialogs using UIKit |
| Dialogs - Bootstrap | Demonstrates modal dialogs using Bootstrap |
| Dialogs - Custom | Demonstrates 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 Shortcuts | Demonstrates how to create keyboard shortcuts for htmx enabled elements |
| Drag & Drop / Sortable | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering |
| Updating Other Content | Demonstrates how to update content beyond just the target elements |
| Confirm | Demonstrates how to implement a custom confirmation dialog with htmx |
| Async Authentication | Demonstrates how to handle async authentication tokens in htmx |
| Web Components | Demonstrates how to integrate htmx with web components and shadow DOM |
| (Experimental) moveBefore()-powered hx-preserve | htmx will use the experimental moveBefore() API for moving elements, if it is present. |
For common practices see the Hotwire / Turbo to htmx Migration Guide.