UI Templ Examples

Below are a set of UX patterns implemented in htmx with minimal HTML and styling.

These are ported from the htmx examples and are intended showcase the use of hx when building HTMX applications.

You can copy and paste them and then adjust them for your needs.

PatternDescription
Click to EditDemonstrates inline editing of a data object
Bulk UpdateDemonstrates bulk updating of multiple rows of data
Active SearchDemonstrates the active search box pattern
Progress BarDemonstrates a job-runner like progress bar
Class ToolsDemo of class-tools options
Server-Sent EventsStreaming responses with the SSE HTMX Extension
Keyboard ShortcutsDemonstrates how to create keyboard shortcuts for htmx enabled elements