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 (needs the Persist plugin) - $store: Global reactive stores
Combobox (typeahead): a text input that asks the server for options as the
user types, and a hidden input holding the chosen value. For a choice among
more rows than a select can carry. With :multiple, each value chosen is a
chip holding its own hidden input. The keyboard and picking behaviour is
the combobox Alpine component in ui-style's components.js.
Combobox (typeahead): a text input that asks the server for options as the user types, and a hidden input holding the chosen value. For a choice among more rows than a select can carry. With `:multiple`, each value chosen is a chip holding its own hidden input. The keyboard and picking behaviour is the `combobox` Alpine component in ui-style's components.js.
Pure UI component functions for HTML generation using Hiccup.
These are reusable, generic components that can be used across all domain modules. No domain-specific logic should be placed here - only pure presentation functions.
Pure UI component functions for HTML generation using Hiccup. These are reusable, generic components that can be used across all domain modules. No domain-specific logic should be placed here - only pure presentation functions.
Form fields from a malli map schema.
One schema answers three questions: which HTML validation attributes a
field carries (input-attrs), what is wrong with a submitted form
(validate), and what the field looks like with its errors (field). A
field rendered with a :validate-url posts itself there when it changes,
and the server answers with the field again, so the browser shows the
server's verdict without holding any state. Without JavaScript the form
submits whole and the same validate decides.
Error messages are i18n markers ([:t :validation/required]); a page that
is not rendered through wagoe-i18n resolves them with plain-errors.
Form fields from a malli map schema. One schema answers three questions: which HTML validation attributes a field carries (`input-attrs`), what is wrong with a submitted form (`validate`), and what the field looks like with its errors (`field`). A field rendered with a `:validate-url` posts itself there when it changes, and the server answers with the field again, so the browser shows the server's verdict without holding any state. Without JavaScript the form submits whole and the same `validate` decides. Error messages are i18n markers (`[:t :validation/required]`); a page that is not rendered through wagoe-i18n resolves them with `plain-errors`.
The path layouts link to as home: the logo, "back" and dashboard links.
The path layouts link to as home: the logo, "back" and dashboard links.
htmx helpers for Hiccup.
htmx helpers for Hiccup.
Lucide-based icon system for Wagoe Framework.
Provides inline SVG icons that work seamlessly with Hiccup. Icons are ISC-licensed from https://lucide.dev/
Usage: (icon :home) (icon :users {:size 20 :class "text-primary"}) (icon :chevron-right {:stroke-width 2.5})
Available icons can be listed with (available-icons)
Lucide-based icon system for Wagoe Framework.
Provides inline SVG icons that work seamlessly with Hiccup.
Icons are ISC-licensed from https://lucide.dev/
Usage:
(icon :home)
(icon :users {:size 20 :class "text-primary"})
(icon :chevron-right {:stroke-width 2.5})
Available icons can be listed with (available-icons)Layout components for consistent page structure.
Contains page layout, navigation, and structural components that provide consistent look and feel across all domain modules.
Layout components for consistent page structure. Contains page layout, navigation, and structural components that provide consistent look and feel across all domain modules.
Modal on native <dialog>. The browser closes it on Esc, the backdrop and the close button, makes the page behind it inert and returns focus on close; components.js (ui-style) only opens it.
Modal on native <dialog>. The browser closes it on Esc, the backdrop and the close button, makes the page behind it inert and returns focus on close; components.js (ui-style) only opens it.
The admin shell: a sidebar that opens and closes, topbar and user menu around a page.
Here rather than in admin so that modules admin depends on (user) can
render in it. The sidebar shows the navigation modules contribute
(wagoe.platform.core.http.nav), or a page's own :nav, a vector of groups:
[{:id :user ; a collapsible module group; without :label "Users" :icon :users ; an id, a plain list under :label :open? true :items [{:href "/web/admin/users" :label "Users" :icon :users :active? true}]}]
The admin shell: a sidebar that opens and closes, topbar and user menu around a page.
Here rather than in admin so that modules admin depends on (user) can
render in it. The sidebar shows the navigation modules contribute
(`wagoe.platform.core.http.nav`), or a page's own `:nav`, a vector of groups:
[{:id :user ; a collapsible module group; without
:label "Users" :icon :users ; an id, a plain list under :label
:open? true
:items [{:href "/web/admin/users" :label "Users"
:icon :users :active? true}]}]Shared table UI helpers (sorting, paging) for Hiccup-based web UIs.
Shared table UI helpers (sorting, paging) for Hiccup-based web UIs.
Toasts: a live region every page layout renders, and toasts an htmx
response adds to it out of band. The toast Alpine component in
components.js dismisses them.
Toasts: a live region every page layout renders, and toasts an htmx response adds to it out of band. The `toast` Alpine component in components.js dismisses them.
Who is signed in, behind their avatar: name and email, extra links, the profile and signing out. The admin shell's topbar uses it; an app with its own layout puts it in its header and loads /css/user-menu.css.
Who is signed in, behind their avatar: name and email, extra links, the profile and signing out. The admin shell's topbar uses it; an app with its own layout puts it in its header and loads /css/user-menu.css.
Validation error transformation utilities for UI display.
Provides functions to convert Malli validation errors into formats suitable for inline field error display in web forms.
Validation error transformation utilities for UI display. Provides functions to convert Malli validation errors into formats suitable for inline field error display in web forms.
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 |