htmx/www/examples.md

layout, title

layout	title
layout.njk	</> htmx - UX Patterns

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
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
Dialogs	Demonstrates the prompt and confirm dialogs
Animations	Demonstrates various animation techniques