mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-27 13:01:03 +00:00
b546c5d69d
* Initial commit for migration guide. * Added notes on Turbo Drive, Turbo Frames, Stimulus Simplified hx-boost. Added Hotwire / Turbo migration guide to examples. Simplified language. Less is more. Added Redirect after form submission section. Added references to hotwire docs. Consistency. First pass on Event interception / pausing. Naming convention note. Naming convention notes. Reference to Event Naming in htmx manual. Added hyperscript as an alternative solution to event interception / pausing. Added async notes to Event interception / pausing area. Simplified language. Less words. Added section on disabling buttons during submission. Less words. Event naming consistency. Short is sweet. Updated hyperscript example. Comparing htmx and Hotwire. Revised htmx vs Hotwire / Turbo Revised htmx vs Hotwire / Turbo Revision to htmx vs Hotwire / Turbo Revised htmx vs Hotwire / Turbo * Clarification of kebab case vs camel case.
2.8 KiB
2.8 KiB
| layout | title |
|---|---|
| layout.njk | </> htmx - 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.
| 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 |
| 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.