mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 22:41:23 +00:00
47 lines
3.1 KiB
Markdown
47 lines
3.1 KiB
Markdown
+++
|
|
title = "Examples"
|
|
insert_anchor_links = "left"
|
|
+++
|
|
|
|
## Server-side Integration Examples
|
|
|
|
A list of [GitHub repositories showing examples of integration](@/server-examples.md) 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](@/examples/click-to-edit.md) | Demonstrates inline editing of a data object
|
|
| [Bulk Update](@/examples/bulk-update.md) | Demonstrates bulk updating of multiple rows of data
|
|
| [Click To Load](@/examples/click-to-load.md) | Demonstrates clicking to load more rows in a table
|
|
| [Delete Row](@/examples/delete-row.md) | Demonstrates row deletion in a table
|
|
| [Edit Row](@/examples/edit-row.md) | Demonstrates how to edit rows in a table
|
|
| [Lazy Loading](@/examples/lazy-load.md) | Demonstrates how to lazy load content
|
|
| [Inline Validation](@/examples/inline-validation.md) | Demonstrates how to do inline field validation
|
|
| [Infinite Scroll](@/examples/infinite-scroll.md) | Demonstrates infinite scrolling of a page
|
|
| [Active Search](@/examples/active-search.md) | Demonstrates the active search box pattern
|
|
| [Progress Bar](@/examples/progress-bar.md) | Demonstrates a job-runner like progress bar
|
|
| [Value Select](@/examples/value-select.md) | Demonstrates making the values of a select dependent on another select
|
|
| [Animations](@/examples/animations.md) | Demonstrates various animation techniques
|
|
| [File Upload](@/examples/file-upload.md) | Demonstrates how to upload a file via ajax with a progress bar
|
|
| [Preserving File Inputs after Form Errors](@/examples/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors
|
|
| [Dialogs - Browser](@/examples/dialogs.md) | Demonstrates the prompt and confirm dialogs
|
|
| [Dialogs - UIKit](@/examples/modal-uikit.md) | Demonstrates modal dialogs using UIKit
|
|
| [Dialogs - Bootstrap](@/examples/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap
|
|
| [Dialogs - Custom](@/examples/modal-custom.md) | Demonstrates modal dialogs from scratch
|
|
| [Tabs (Using HATEOAS)](@/examples/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles
|
|
| [Tabs (Using Hyperscript)](@/examples/tabs-hyperscript.md) | Demonstrates how to display and select tabs using Hyperscript
|
|
| [Keyboard Shortcuts](@/examples/keyboard-shortcuts.md) | Demonstrates how to create keyboard shortcuts for htmx enabled elements
|
|
| [Sortable](@/examples/sortable.md) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering
|
|
| [Updating Other Content](@/examples/update-other-content.md) | Demonstrates how to update content beyond just the target elements
|
|
| [Confirm](@/examples/confirm.md) | 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](@/migration-guide-hotwire-turbo.md).
|