Alpine.js helper functions for Hiccup templates.
Provides declarative attributes for common Alpine patterns while maintaining compatibility with HTMX server communication.
Alpine.js handles client-side reactivity (dropdowns, state, transitions) while HTMX handles server communication. Alpine's MutationObserver automatically detects HTMX DOM changes, eliminating manual re-initialization.
Key patterns:
Alpine.js helper functions for Hiccup templates. Provides declarative attributes for common Alpine patterns while maintaining compatibility with HTMX server communication. Alpine.js handles client-side reactivity (dropdowns, state, transitions) while HTMX handles server communication. Alpine's MutationObserver automatically detects HTMX DOM changes, eliminating manual re-initialization. Key patterns: - x-data: Component state initialization - x-bind: Dynamic attribute binding - x-on/@: Event handlers - x-show: Conditional visibility with transitions - x-model: Two-way data binding - $persist: LocalStorage persistence - $store: Global reactive stores
(bulk-selection-attrs)Bulk selection container attributes for table checkbox management.
Provides reactive selectedIds array that automatically updates when checkboxes change, eliminating need for htmx:afterSwap handlers.
Returns: Map of Alpine attributes for bulk selection container
Example: [:div (bulk-selection-attrs) [:input (select-all-checkbox-attrs)] [:input (row-checkbox-attrs id)] [:button (delete-button-attrs) "Delete"]]
Bulk selection container attributes for table checkbox management. Provides reactive selectedIds array that automatically updates when checkboxes change, eliminating need for htmx:afterSwap handlers. Returns: Map of Alpine attributes for bulk selection container Example: [:div (bulk-selection-attrs) [:input (select-all-checkbox-attrs)] [:input (row-checkbox-attrs id)] [:button (delete-button-attrs) "Delete"]]
(collapsible-attrs)(collapsible-attrs initial-open)Collapsible panel attributes with transition.
Args: initial-open: Boolean for initial state (default false)
Returns: Map of Alpine attributes for collapsible content
Collapsible panel attributes with transition. Args: initial-open: Boolean for initial state (default false) Returns: Map of Alpine attributes for collapsible content
(delete-button-attrs)Delete button attributes that disables when nothing selected.
Returns: Map of attributes for bulk delete button
Delete button attributes that disables when nothing selected. Returns: Map of attributes for bulk delete button
(dropdown-attrs)Standard dropdown component attributes.
Provides open/close state, click-outside handling, and escape key support.
Returns: Map of Alpine attributes for dropdown behavior
Example: [:div (dropdown-attrs) [:button (toggle-button-attrs) "Menu"] [:div {:x-show "open"} "Content"]]
Standard dropdown component attributes.
Provides open/close state, click-outside handling, and escape key support.
Returns:
Map of Alpine attributes for dropdown behavior
Example:
[:div (dropdown-attrs)
[:button (toggle-button-attrs) "Menu"]
[:div {:x-show "open"} "Content"]](mobile-menu-toggle-attrs)Mobile menu toggle button attributes.
Returns: Map of attributes for mobile menu toggle
Mobile menu toggle button attributes. Returns: Map of attributes for mobile menu toggle
(row-checkbox-attrs id)Row checkbox attributes for bulk selection.
Args: id: Record ID value
Returns: Map of attributes for individual row checkbox
Row checkbox attributes for bulk selection. Args: id: Record ID value Returns: Map of attributes for individual row checkbox
(select-all-checkbox-attrs)Select-all checkbox attributes for bulk selection.
Returns: Map of attributes for the select-all checkbox
Select-all checkbox attributes for bulk selection. Returns: Map of attributes for the select-all checkbox
(sidebar-attrs)Sidebar element attributes for hover expand/collapse.
Returns: Map of Alpine attributes for sidebar aside element
Sidebar element attributes for hover expand/collapse. Returns: Map of Alpine attributes for sidebar aside element
(sidebar-nav-link-attrs)Sidebar navigation link attributes for mobile drawer auto-close.
Returns: Map of attributes for nav links
Sidebar navigation link attributes for mobile drawer auto-close. Returns: Map of attributes for nav links
(sidebar-overlay-attrs)Overlay attributes for mobile drawer.
Returns: Map of attributes for overlay div
Overlay attributes for mobile drawer. Returns: Map of attributes for overlay div
(sidebar-shell-attrs)Admin shell attributes for sidebar state binding.
Returns: Map of Alpine attributes for admin-shell div
Admin shell attributes for sidebar state binding. Returns: Map of Alpine attributes for admin-shell div
(sidebar-store-init)Generate Alpine store initialization script for sidebar state.
This creates a global Alpine store that:
Returns: Hiccup script element with store initialization
Generate Alpine store initialization script for sidebar state. This creates a global Alpine store that: - Persists sidebar state to localStorage - Handles collapse/expand on hover - Manages mobile drawer open/close - Supports keyboard shortcuts (Ctrl+B) Returns: Hiccup script element with store initialization
(toggle-button-attrs)Toggle button attributes for controlling 'open' state.
Returns: Map of Alpine attributes for toggle buttons
Toggle button attributes for controlling 'open' state. Returns: Map of Alpine attributes for toggle buttons
(x-bind attr expr)Generate x-bind attribute for dynamic attribute binding.
Args: attr: Attribute name (keyword or string) expr: JavaScript expression string
Returns: Map with x-bind attribute
Example: (x-bind :disabled "selectedIds.length === 0") => {:x-bind:disabled "selectedIds.length === 0"}
Generate x-bind attribute for dynamic attribute binding.
Args:
attr: Attribute name (keyword or string)
expr: JavaScript expression string
Returns:
Map with x-bind attribute
Example:
(x-bind :disabled "selectedIds.length === 0")
=> {:x-bind:disabled "selectedIds.length === 0"}(x-cloak)Generate x-cloak attribute to prevent FOUC.
Returns: Map with :x-cloak attribute
Generate x-cloak attribute to prevent FOUC. Returns: Map with :x-cloak attribute
(x-data state)Generate x-data attribute for Alpine component initialization.
Args: state: Map of initial state, or string expression
Returns: Map with :x-data attribute
Example: (x-data {:open false}) => {:x-data "{open: false}"}
(x-data {:items [1 2 3] :nested {:a true}}) => {:x-data "{items: [1, 2, 3], nested: {a: true}}"}
Generate x-data attribute for Alpine component initialization.
Args:
state: Map of initial state, or string expression
Returns:
Map with :x-data attribute
Example:
(x-data {:open false})
=> {:x-data "{open: false}"}
(x-data {:items [1 2 3] :nested {:a true}})
=> {:x-data "{items: [1, 2, 3], nested: {a: true}}"}(x-model binding)Generate x-model attribute for two-way binding.
Args: binding: JavaScript variable name
Returns: Map with :x-model attribute
Example: (x-model "selectedIds") => {:x-model "selectedIds"}
Generate x-model attribute for two-way binding.
Args:
binding: JavaScript variable name
Returns:
Map with :x-model attribute
Example:
(x-model "selectedIds")
=> {:x-model "selectedIds"}(x-on event handler)Generate event handler attribute.
Args: event: Event name (keyword or string), can include modifiers handler: JavaScript expression string
Returns: Map with @ event handler attribute
Example: (x-on :click "open = !open") => {:@click "open = !open"}
(x-on :click.outside "open = false") => {:@click.outside "open = false"}
Generate event handler attribute.
Args:
event: Event name (keyword or string), can include modifiers
handler: JavaScript expression string
Returns:
Map with @ event handler attribute
Example:
(x-on :click "open = !open")
=> {:@click "open = !open"}
(x-on :click.outside "open = false")
=> {:@click.outside "open = false"}(x-persist key initial)Generate Alpine $persist expression for localStorage.
Args: key: Storage key string initial: Initial value (will be JSON encoded)
Returns: String expression using Alpine.$persist
Example: (x-persist "sidebar-state" "expanded") => "Alpine.$persist('expanded').as('sidebar-state')"
Generate Alpine $persist expression for localStorage.
Args:
key: Storage key string
initial: Initial value (will be JSON encoded)
Returns:
String expression using Alpine.$persist
Example:
(x-persist "sidebar-state" "expanded")
=> "Alpine.$persist('expanded').as('sidebar-state')"(x-show condition)Generate x-show attribute for conditional visibility.
Args: condition: JavaScript expression string
Returns: Map with :x-show attribute
Example: (x-show "open") => {:x-show "open"}
Generate x-show attribute for conditional visibility.
Args:
condition: JavaScript expression string
Returns:
Map with :x-show attribute
Example:
(x-show "open")
=> {:x-show "open"}(x-transition)(x-transition opts)Generate x-transition attribute for enter/leave animations.
Args: opts: Optional map with :origin, :duration, etc.
Returns: Map with x-transition attributes
Example: (x-transition) => {:x-transition true}
(x-transition {:origin "top right"}) => {:x-transition.origin.top.right true}
Generate x-transition attribute for enter/leave animations.
Args:
opts: Optional map with :origin, :duration, etc.
Returns:
Map with x-transition attributes
Example:
(x-transition)
=> {:x-transition true}
(x-transition {:origin "top right"})
=> {:x-transition.origin.top.right true}cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |