htmx/www/content/examples/_index.md

+++ title = "Examples" insert_anchor_links = "heading" +++

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.

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.

Migrating from Hotwire / Turbo ?

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