mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 14:31:47 +00:00
4af437a4e1
* prevent binary data loss by restructuring forms. * Update www/content/docs.md Co-authored-by: Denis Palashevskii <20725046+Renerick@users.noreply.github.com> * moved the example to example directory * Updated documentation based on feedback --------- Co-authored-by: gbourant <root@gbourant.com> Co-authored-by: Denis Palashevskii <20725046+Renerick@users.noreply.github.com>
3.1 KiB
3.1 KiB
+++ title = "Examples" insert_anchor_links = "left" +++
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 Hyperscript) | Demonstrates how to display and select tabs using Hyperscript |
| Keyboard Shortcuts | Demonstrates how to create keyboard shortcuts for htmx enabled elements |
| 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 |
Migrating from Hotwire / Turbo ?
For common practices see the Hotwire / Turbo to htmx Migration Guide.