ui

package
v1.1.6 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Mar 19, 2026 License: MIT Imports: 16 Imported by: 0

Documentation

Overview

Package ui provides a server-rendered UI framework where Go builds typed DOM node trees that compile to pure JavaScript strings. The browser receives raw JS that performs document.createElement calls directly -- no HTML, no JSON intermediate, no client-side framework.

SVG elements (svg, path, circle, rect, etc.) are automatically created with document.createElementNS using the SVG namespace. Child elements of an SVG root inherit the namespace. Classes on SVG elements use setAttribute('class', ...) instead of .className for compatibility.

Index

Constants

View Source 
const (
	BtnBlue         = "bg-blue-600 hover:bg-blue-700 text-white"
	BtnRed          = "bg-red-600 hover:bg-red-700 text-white"
	BtnGreen        = "bg-green-600 hover:bg-green-700 text-white"
	BtnYellow       = "bg-yellow-500 hover:bg-yellow-600 text-gray-900"
	BtnPurple       = "bg-purple-600 hover:bg-purple-700 text-white"
	BtnGray         = "bg-gray-600 hover:bg-gray-700 text-white"
	BtnWhite        = "" /* 142-byte string literal not displayed */
	BtnBlueOutline  = "" /* 131-byte string literal not displayed */
	BtnRedOutline   = "bg-transparent hover:bg-red-50 text-red-600 border border-red-600 dark:hover:bg-red-950 dark:text-red-400 dark:border-red-500"
	BtnGreenOutline = "" /* 137-byte string literal not displayed */
)

Button color presets.

View Source 
const (
	BtnXS = "px-2 py-1 text-xs"
	BtnSM = "px-3 py-1.5 text-sm"
	BtnMD = "px-4 py-2 text-sm"
	BtnLG = "px-5 py-2.5 text-base"
	BtnXL = "px-6 py-3 text-lg"
)

Button size presets.

View Source 
const (
	RadioInline = FieldRadio
	RadioButton = FieldRadioBtn
	RadioCard   = FieldRadioCard
)

Variables

This section is empty.

Functions

func AddClass added in v1.1.0 

func AddClass(id, cls string) string

AddClass returns JS that adds a CSS class to an element.

func Download added in v1.1.0 

func Download(filename, mimeType, base64Data string) string

Download returns JS that triggers a file download.

func DragToScroll added in v1.1.0 

func DragToScroll(id string) string

DragToScroll returns JS that enables mouse-drag horizontal scrolling on the element with the given ID. Interactive children (input, select, button, a, .dt-filter-dropdown) are excluded from triggering the drag.

func Hide added in v1.1.0 

func Hide(id string) string

Hide returns JS that adds the 'hidden' class (hides the element).

func Notify added in v1.1.0 

func Notify(variant, message string) string

Notify returns JS that shows a toast notification styled with a left accent border, colored dot, and auto-dismiss. Supports "success", "error", "error-reload" (persistent with Reload button), and "info" (default) variants.

func Redirect added in v1.1.0 

func Redirect(url string) string

Redirect returns JS that navigates to a new URL (full page reload).

func RemoveClass added in v1.1.0 

func RemoveClass(id, cls string) string

RemoveClass returns JS that removes a CSS class from an element.

func RemoveEl added in v1.1.0 

func RemoveEl(id string) string

RemoveEl returns JS that removes an element by ID.

func SetAttr added in v1.1.0 

func SetAttr(id, attr, value string) string

SetAttr returns JS that sets an attribute on an element by ID.

func SetLocation added in v1.1.0 

func SetLocation(url string) string

SetLocation returns JS that updates the browser URL without a page reload using history.pushState. Use this in WS actions to keep the address bar in sync with the visible content.

func SetText added in v1.1.0 

func SetText(id, text string) string

SetText returns JS that sets the textContent of an element by ID.

func SetTitle added in v1.1.0 

func SetTitle(title string) string

SetTitle returns JS that updates the document title.

func Show added in v1.1.0 

func Show(id string) string

Show returns JS that removes the 'hidden' class (shows the element).

func Target 

func Target() string

Target generates a random, collision-resistant ID string suitable for use as an HTML id attribute (e.g. "t-a1b2c3d4e5f6").

Types

type AccordionBuilder added in v1.1.0 

type AccordionBuilder struct {
	// contains filtered or unexported fields
}

AccordionBuilder builds an accordion component using native <details>/<summary>.

func NewAccordion added in v1.1.0 

func NewAccordion() *AccordionBuilder

NewAccordion creates a new AccordionBuilder with default "bordered" variant.

func (*AccordionBuilder) AccordionClass added in v1.1.0 

func (a *AccordionBuilder) AccordionClass(cls string) *AccordionBuilder

AccordionClass sets additional CSS classes on the accordion wrapper.

func (*AccordionBuilder) Build added in v1.1.0 

func (a *AccordionBuilder) Build() *Node

Build produces the complete accordion Node tree.

func (*AccordionBuilder) Item added in v1.1.0 

func (a *AccordionBuilder) Item(title string, content *Node, open ...bool) *AccordionBuilder

Item adds an accordion item. The optional open parameter controls whether the item starts expanded (defaults to false).

func (*AccordionBuilder) Multiple added in v1.1.0 

func (a *AccordionBuilder) Multiple(m bool) *AccordionBuilder

Multiple controls whether multiple items can be open simultaneously. When false (default), opening one item closes others.

func (*AccordionBuilder) Variant added in v1.1.0 

func (a *AccordionBuilder) Variant(v string) *AccordionBuilder

Variant sets the visual style: "bordered" (default), "ghost", or "separated".

type Action 

type Action struct {
	Name    string         // e.g. "counter.increment"
	Data    map[string]any // state payload sent with the call
	Collect []string       // element IDs whose .value to collect before calling
	// contains filtered or unexported fields
}

Action describes a server-side handler invoked via WebSocket, or a client-side JS snippet when created via JS().

func Back added in v1.1.0 

func Back() *Action

Back returns JS that navigates back in browser history (history.back()).

func JS added in v1.1.0 

func JS(code string) *Action

JS creates a client-side-only Action that executes raw JavaScript instead of calling the server via WebSocket. 

r.Button("...").OnClick(r.JS("history.back()"))

type ActionHandler added in v1.1.0 

type ActionHandler func(ctx *Context) string

ActionHandler processes a WS action call and returns a JS string to execute on the client.

type AlertBuilder added in v1.1.0 

type AlertBuilder struct {
	// contains filtered or unexported fields
}

AlertBuilder configures a styled alert/notification banner.

func NewAlert added in v1.1.0 

func NewAlert() *AlertBuilder

NewAlert creates a new AlertBuilder with "info" variant.

func (*AlertBuilder) AlertClass added in v1.1.0 

func (a *AlertBuilder) AlertClass(cls string) *AlertBuilder

AlertClass sets additional CSS classes on the alert container.

func (*AlertBuilder) Build added in v1.1.0 

func (a *AlertBuilder) Build() *Node

Build produces the alert Node tree.

func (*AlertBuilder) Dismissible added in v1.1.0 

func (a *AlertBuilder) Dismissible(d bool) *AlertBuilder

Dismissible enables a close button on the alert.

func (*AlertBuilder) Message added in v1.1.0 

func (a *AlertBuilder) Message(m string) *AlertBuilder

Message sets the alert body text.

func (*AlertBuilder) Persist added in v1.1.0 

func (a *AlertBuilder) Persist(key string) *AlertBuilder

Persist sets a localStorage key. When dismissed, the alert stays hidden on subsequent page loads until the key is cleared.

func (*AlertBuilder) Title added in v1.1.0 

func (a *AlertBuilder) Title(t string) *AlertBuilder

Title sets the alert heading.

func (*AlertBuilder) Variant added in v1.1.0 

func (a *AlertBuilder) Variant(v string) *AlertBuilder

Variant sets the visual variant: "info", "success", "warning", "error", or any of those with a "-outline" suffix for bordered style.

type App 

type App struct {

	// Favicon is the URL path for the site favicon (e.g. "/assets/favicon.svg").
	// When set, a <link rel="icon"> tag is emitted in the HTML shell.
	Favicon string

	// Title sets the <title> element in the HTML shell.
	// Improves accessibility (screen readers) and SEO.
	Title string

	// Description sets the <meta name="description"> content in the HTML shell.
	// Used by search engines to summarize page content.
	Description string

	// HTMLHead contains raw HTML strings injected into the <head> section
	// after the built-in Tailwind/Material Icons/WS script tags.
	// Each entry is emitted as-is (e.g. "<style>body{margin:0}</style>",
	// "<script src=\"...\"></script>", "<link ...>").
	HTMLHead []string
	// contains filtered or unexported fields
}

App is the top-level application container. It holds page routes (GET) and named actions (WS). Pages return a *Node tree that compiles to JS for the initial render. Actions return raw JS strings for DOM mutations.

func NewApp added in v1.1.0 

func NewApp() *App

NewApp creates a new application instance.

func (*App) Action 

func (app *App) Action(name string, handler ActionHandler)

Action registers a named server action callable via WebSocket. The handler receives a Context (with .Body() for payload) and returns a raw JS string that the client executes directly.

func (*App) Assets 

func (app *App) Assets(fsys fs.FS, dir, prefix string)

Assets serves static files from an embedded or on-disk filesystem. The dir is stripped from fsys (via fs.Sub) and the result is served under the given URL prefix. Example: 

//go:embed assets/*
var assets embed.FS
app.Assets(assets, "assets", "/assets/")

This makes assets/favicon.svg available at /assets/favicon.svg.

func (*App) Broadcast added in v1.1.1 

func (app *App) Broadcast(js string)

Broadcast sends a JS string to ALL connected WebSocket clients. Can be called from anywhere (background goroutines, HTTP handlers, etc.) without needing a Context.

func (*App) CSS added in v1.1.3 

func (app *App) CSS(urls []string, css string)

CSS registers external stylesheets and/or inline CSS rules that apply to every page in the application. The tags are injected into the HTML <head> server-side, so they load immediately without JavaScript. 

app.CSS(
    []string{"https://fonts.googleapis.com/css2?family=Oswald&display=swap"},
    `body { font-family: 'Oswald', sans-serif; }`,
)

Pass nil for urls if you only need inline CSS, or "" for css if you only need external links.

func (*App) DELETE added in v0.111.8 

func (app *App) DELETE(path string, handler http.HandlerFunc)

DELETE registers a standard HTTP DELETE handler on the internal mux.

func (*App) GET added in v0.111.8 

func (app *App) GET(path string, handler http.HandlerFunc)

GET registers a standard HTTP GET handler on the internal mux. Use this for REST API endpoints that return JSON, files, etc.

func (*App) Handler added in v0.111.8 

func (app *App) Handler() http.Handler

Handler sets up routes and returns the internal http.Handler (mux). Use this when you need a custom http.Server for graceful shutdown, TLS, etc. 

srv := &http.Server{Addr: ":8080", Handler: app.Handler()}
srv.ListenAndServe()

func (*App) Layout 

func (app *App) Layout(handler LayoutHandler)

Layout registers a layout handler that wraps every page render. The handler returns a *Node tree that must contain exactly one element with ID("__content__"). The page handler's output is injected there.

func (*App) Listen 

func (app *App) Listen(addr string) error

Listen sets up HTTP handlers and starts the server.

func (*App) POST added in v0.111.8 

func (app *App) POST(path string, handler http.HandlerFunc)

POST registers a standard HTTP POST handler on the internal mux.

func (*App) Page 

func (app *App) Page(path string, handler PageHandler)

Page registers a GET route. The handler returns a *Node tree which is compiled to JS and served inside a minimal HTML shell.

type BadgeBuilder added in v1.1.0 

type BadgeBuilder struct {
	// contains filtered or unexported fields
}

BadgeBuilder configures an inline badge / pill label.

func NewBadge added in v1.1.0 

func NewBadge(text string) *BadgeBuilder

NewBadge creates a new BadgeBuilder with the given text.

func (*BadgeBuilder) BadgeClass added in v1.1.0 

func (b *BadgeBuilder) BadgeClass(cls string) *BadgeBuilder

BadgeClass sets additional CSS classes on the badge.

func (*BadgeBuilder) BadgeIcon added in v1.1.0 

func (b *BadgeBuilder) BadgeIcon(name string) *BadgeBuilder

BadgeIcon sets a Material icon name to prepend inside the badge.

func (*BadgeBuilder) BadgeSize added in v1.1.0 

func (b *BadgeBuilder) BadgeSize(s string) *BadgeBuilder

BadgeSize sets the badge size: "sm", "md" (default), or "lg".

func (*BadgeBuilder) Build added in v1.1.0 

func (b *BadgeBuilder) Build() *Node

Build produces the badge Node.

func (*BadgeBuilder) Color added in v1.1.0 

func (b *BadgeBuilder) Color(c string) *BadgeBuilder

Color sets the color scheme. Supports: "gray", "red", "green", "blue", "yellow", "purple", each optionally with "-outline" or "-soft" suffix.

func (*BadgeBuilder) Dot added in v1.1.0 

func (b *BadgeBuilder) Dot() *BadgeBuilder

Dot renders a small dot indicator instead of text content.

func (*BadgeBuilder) Square added in v1.1.0 

func (b *BadgeBuilder) Square() *BadgeBuilder

Square uses rounded-md corners instead of fully rounded (pill shape).

type ButtonBuilder added in v1.1.0 

type ButtonBuilder struct {
	// contains filtered or unexported fields
}

ButtonBuilder configures a high-level button component.

func NewButton added in v1.1.0 

func NewButton(label string) *ButtonBuilder

NewButton creates a new ButtonBuilder with the given label. Defaults to BtnBlue color and BtnMD size.

func (*ButtonBuilder) BtnClass added in v1.1.0 

func (b *ButtonBuilder) BtnClass(cls string) *ButtonBuilder

BtnClass sets additional CSS classes on the button element.

func (*ButtonBuilder) BtnColor added in v1.1.0 

func (b *ButtonBuilder) BtnColor(c string) *ButtonBuilder

BtnColor sets the button color preset (use Btn* constants or custom classes).

func (*ButtonBuilder) BtnIcon added in v1.1.0 

func (b *ButtonBuilder) BtnIcon(name string) *ButtonBuilder

BtnIcon sets a Material icon name to display before the label.

func (*ButtonBuilder) BtnSize added in v1.1.0 

func (b *ButtonBuilder) BtnSize(s string) *ButtonBuilder

BtnSize sets the button size preset (use Btn* size constants or custom classes).

func (*ButtonBuilder) Build added in v1.1.0 

func (b *ButtonBuilder) Build() *Node

Build produces the button Node.

func (*ButtonBuilder) Disabled added in v1.1.0 

func (b *ButtonBuilder) Disabled(d bool) *ButtonBuilder

Disabled marks the button as visually and functionally disabled.

func (*ButtonBuilder) Href added in v1.1.0 

func (b *ButtonBuilder) Href(url string) *ButtonBuilder

Href converts the button to an <a> tag linking to the given URL.

func (*ButtonBuilder) OnBtnClick added in v1.1.0 

func (b *ButtonBuilder) OnBtnClick(a *Action) *ButtonBuilder

OnBtnClick sets the action to execute when the button is clicked.

func (*ButtonBuilder) Reset added in v1.1.0 

func (b *ButtonBuilder) Reset() *ButtonBuilder

Reset makes the button a reset button.

func (*ButtonBuilder) Submit added in v1.1.0 

func (b *ButtonBuilder) Submit(formID ...string) *ButtonBuilder

Submit makes the button a submit button. Optionally pass a form ID.

type CaptchaV3Builder added in v1.1.0 

type CaptchaV3Builder struct {
	// contains filtered or unexported fields
}

CaptchaV3Builder configures a reCAPTCHA v3 widget that loads the Google script, executes the challenge, and stores the token in a hidden input.

func NewCaptchaV3 added in v1.1.0 

func NewCaptchaV3(siteKey string) *CaptchaV3Builder

NewCaptchaV3 creates a new reCAPTCHA v3 builder with the given site key.

func (*CaptchaV3Builder) Build added in v1.1.0 

func (c *CaptchaV3Builder) Build() *Node

Build produces the Node tree: a container with a hidden input for the token and JS that loads the reCAPTCHA v3 script, executes the challenge, and auto-refreshes the token every 110 seconds.

func (*CaptchaV3Builder) FormAction added in v1.1.0 

func (c *CaptchaV3Builder) FormAction(name string) *CaptchaV3Builder

FormAction sets the action name sent to reCAPTCHA for scoring context.

func (*CaptchaV3Builder) TokenField added in v1.1.0 

func (c *CaptchaV3Builder) TokenField(name string) *CaptchaV3Builder

TokenField sets the hidden input name where the token will be stored. Defaults to "g-recaptcha-response".

type CardBuilder added in v1.1.0 

type CardBuilder struct {
	// contains filtered or unexported fields
}

CardBuilder constructs a card component with optional header, body, footer, image, and variant styling.

func NewCard added in v1.1.0 

func NewCard() *CardBuilder

NewCard creates a new CardBuilder with default settings.

func (*CardBuilder) Build added in v1.1.0 

func (c *CardBuilder) Build() *Node

Build compiles the card into a *Node.

func (*CardBuilder) CardBody added in v1.1.0 

func (c *CardBuilder) CardBody(n *Node) *CardBuilder

CardBody sets the card body node.

func (*CardBuilder) CardClass added in v1.1.0 

func (c *CardBuilder) CardClass(cls string) *CardBuilder

CardClass appends additional CSS classes to the card container.

func (*CardBuilder) CardCompact added in v1.1.0 

func (c *CardBuilder) CardCompact(cp bool) *CardBuilder

CardCompact reduces padding and image height.

func (*CardBuilder) CardFooter added in v1.1.0 

func (c *CardBuilder) CardFooter(n *Node) *CardBuilder

CardFooter sets the card footer node.

func (*CardBuilder) CardHeader added in v1.1.0 

func (c *CardBuilder) CardHeader(n *Node) *CardBuilder

CardHeader sets the card header node.

func (*CardBuilder) CardHover added in v1.1.0 

func (c *CardBuilder) CardHover(h bool) *CardBuilder

CardHover enables a lift effect on hover.

func (*CardBuilder) CardImage added in v1.1.0 

func (c *CardBuilder) CardImage(src, alt string) *CardBuilder

CardImage sets the card image source URL and alt text.

func (*CardBuilder) CardImagePriority added in v1.1.0 

func (c *CardBuilder) CardImagePriority(p bool) *CardBuilder

CardImagePriority marks the card image with fetchpriority="high" for LCP optimization. Use on the most important above-the-fold card image.

func (*CardBuilder) CardImageSize added in v1.1.0 

func (c *CardBuilder) CardImageSize(width, height string) *CardBuilder

CardImageSize sets explicit width and height on the card image to prevent layout shifts (CLS). Values should be the intrinsic pixel dimensions.

func (*CardBuilder) CardPadding added in v1.1.0 

func (c *CardBuilder) CardPadding(p string) *CardBuilder

CardPadding overrides the default padding class.

func (*CardBuilder) CardVariant added in v1.1.0 

func (c *CardBuilder) CardVariant(v string) *CardBuilder

CardVariant sets the card variant: "shadowed", "bordered", "flat", or "glass".

type ColOpt added in v1.1.0 

type ColOpt[T any] struct {
	Text          func(*T) *Node // cell renderer
	Sortable      bool           // whether the column is sortable
	Filter        FilterType     // filter type (NumFilter, TxtFilter, DateFilter, SelectFilter); empty = no filter
	FilterOptions []string       // options for SelectFilter
	HeadCls       string         // CSS class for the <th>
	CellCls       string         // CSS class for the <td>
}

ColOpt configures a column added via Col.

type Collate 

type Collate[T any] struct {
	// contains filtered or unexported fields
}

Collate is a generic data component with a filter/sort panel, search bar, load-more pagination, and Excel export. Data fetching is delegated to a user-defined WS action.

func NewCollate added in v1.1.0 

func NewCollate[T any](id string) *Collate[T]

NewCollate creates a new Collate with sensible defaults.

func (*Collate[T]) Action added in v1.1.0 

func (c *Collate[T]) Action(name string) *Collate[T]

Action sets the WS action name for all operations. The action receives: {operation, search, page, limit, order, filters}

func (*Collate[T]) BodyID added in v1.1.0 

func (c *Collate[T]) BodyID() string

BodyID returns the ID of the body container for use with ToJSAppend.

func (*Collate[T]) CollateClass added in v1.1.0 

func (c *Collate[T]) CollateClass(cls string) *Collate[T]

CollateClass sets the wrapper CSS classes.

func (*Collate[T]) Detail added in v1.1.0 

func (c *Collate[T]) Detail(fn func(*T) *Node) *Collate[T]

Detail sets a function that renders expandable detail content for each row. When set, clicking a row toggles an accordion-style detail panel below it with a smooth expand/collapse animation.

func (*Collate[T]) Empty added in v1.1.0 

func (c *Collate[T]) Empty(text string) *Collate[T]

Empty sets the empty state text.

func (*Collate[T]) EmptyIcon added in v1.1.0 

func (c *Collate[T]) EmptyIcon(icon string) *Collate[T]

EmptyIcon sets the Material Icon name for the empty state.

func (*Collate[T]) Filter added in v1.1.0 

func (c *Collate[T]) Filter(fields ...CollateFilterField) *Collate[T]

Filter adds filterable fields shown in the filter panel.

func (*Collate[T]) FooterID added in v1.1.0 

func (c *Collate[T]) FooterID() string

FooterID returns the ID of the footer element for use with ToJSReplace.

func (*Collate[T]) HasMore added in v1.1.0 

func (c *Collate[T]) HasMore(more bool) *Collate[T]

HasMore indicates there are more rows to load.

func (*Collate[T]) Limit added in v1.1.0 

func (c *Collate[T]) Limit(n int) *Collate[T]

Limit sets items per page (default 20).

func (*Collate[T]) Locale added in v1.1.6 

func (c *Collate[T]) Locale(l *CollateLocale) *Collate[T]

Locale sets a per-instance locale for this component's UI strings. When nil (default), English text is used. 

collate.Locale(&ui.CollateLocale{Search: "Hľadať...", Apply: "Použiť"})

func (*Collate[T]) Order added in v1.1.0 

func (c *Collate[T]) Order(order string) *Collate[T]

Order sets the current sort order (e.g. "name asc").

func (*Collate[T]) Page added in v1.1.0 

func (c *Collate[T]) Page(p int) *Collate[T]

Page sets the current page (1-based).

func (*Collate[T]) Render added in v1.1.0 

func (c *Collate[T]) Render(data []*T) *Node

Render builds the full Collate Node tree from the provided data slice.

func (*Collate[T]) RenderFooter added in v1.1.0 

func (c *Collate[T]) RenderFooter() *Node

RenderFooter builds just the footer node (for replacing after load-more).

func (*Collate[T]) RenderRows added in v1.1.0 

func (c *Collate[T]) RenderRows(data []*T) []*Node

RenderRows builds only the data row nodes (for appending on "load more").

func (*Collate[T]) Row added in v1.1.0 

func (c *Collate[T]) Row(fn func(*T, int) *Node) *Collate[T]

Row sets the function that renders each data item. The function receives a pointer to the item and its index.

func (*Collate[T]) RowOffset added in v1.1.0 

func (c *Collate[T]) RowOffset(offset int) *Collate[T]

RowOffset sets the starting offset for alternating row stripes.

func (*Collate[T]) Search added in v1.1.0 

func (c *Collate[T]) Search(val string) *Collate[T]

Search sets the current search value.

func (*Collate[T]) SetFilter added in v1.1.0 

func (c *Collate[T]) SetFilter(field string, val *CollateFilterValue) *Collate[T]

SetFilter sets a filter value for a field.

func (*Collate[T]) Sort added in v1.1.0 

func (c *Collate[T]) Sort(fields ...CollateSortField) *Collate[T]

Sort adds sortable fields shown as buttons in the filter panel.

func (*Collate[T]) TotalItems added in v1.1.0 

func (c *Collate[T]) TotalItems(n int) *Collate[T]

TotalItems sets the total matching item count for display.

type CollateFilterField added in v1.1.0 

type CollateFilterField struct {
	Field   string            // DB field name
	Label   string            // display label
	Type    CollateFilterType // control type
	Options []CollateOption   // for CollateSelect / CollateMultiCheck
}

CollateFilterField describes a filterable field shown in the filter panel.

type CollateFilterType added in v1.1.0 

type CollateFilterType int

CollateFilterType defines the kind of filter control. 

const (
	CollateBool       CollateFilterType = iota // checkbox
	CollateDateRange                           // from/to date pickers
	CollateSelect                              // dropdown select
	CollateMultiCheck                          // multiple checkboxes (like old BOOL with condition)
)

type CollateFilterValue added in v1.1.0 

type CollateFilterValue struct {
	Field string `json:"field"`
	Type  string `json:"type"`  // "bool", "date", "select"
	Bool  bool   `json:"bool"`  // for CollateBool
	From  string `json:"from"`  // for CollateDateRange
	To    string `json:"to"`    // for CollateDateRange
	Value string `json:"value"` // for CollateSelect
}

CollateFilterValue holds the current value of a filter.

type CollateLocale added in v1.1.6 

type CollateLocale struct {
	FilterLocale             // date/range labels shared with DataTable
	Search            string // search input placeholder
	Apply             string // apply button
	Reset             string // reset button
	Excel             string // export button
	Filter            string // filter toggle button
	LoadMore          string // load more button
	NoData            string // empty state
	AllOption         string // "— All —" select option
	FiltersAndSorting string // panel header
	Filters           string // filters section header
	SortBy            string // sort section header

	// ItemCount formats "X of Y" — receives (showing, total).
	ItemCount func(showing, total int) string
}

CollateLocale holds all translatable strings used by Collate. Create one only when you need non-English text; pass it via .Locale(). 

loc := &ui.CollateLocale{Search: "Hľadať...", Apply: "Použiť", ...}
collate := ui.NewCollate[T]("c").Locale(loc)

type CollateOption added in v1.1.0 

type CollateOption struct {
	Value string
	Label string
}

CollateOption is a key/value pair for select and multi-check filters.

type CollateSortField added in v1.1.0 

type CollateSortField struct {
	Field string // DB/sort field name
	Label string // display label
}

CollateSortField describes a sortable field shown as a button in the filter panel.

type ColumnFilter added in v1.1.0 

type ColumnFilter struct {
	Type    FilterType
	Options []string // for select type
	Label   string   // column label for the filter popup
}

ColumnFilter defines filter configuration for a column

type ConfirmLocale added in v1.1.6 

type ConfirmLocale struct {
	Cancel  string
	Confirm string
}

ConfirmLocale holds translatable strings for ConfirmDialog.

type ConfirmOpt added in v1.1.6 

type ConfirmOpt struct {
	CancelAction *Action        // custom cancel action; nil = dismiss overlay
	Locale       *ConfirmLocale // per-instance locale; nil = English default
}

ConfirmDialog creates a fixed-overlay confirmation dialog with title, message, a confirm button (red), and a cancel button. ConfirmOpt configures optional ConfirmDialog settings.

type Context 

type Context struct {
	Request    *http.Request
	Session    map[string]any
	PathParams map[string]string
	Query      map[string]string
	// contains filtered or unexported fields
}

Context carries request data for both page renders and WS action calls.

func (*Context) Body 

func (ctx *Context) Body(target any) error

func (*Context) Broadcast added in v1.1.0 

func (ctx *Context) Broadcast(js string)

Broadcast sends a JS string to ALL connected WebSocket clients.

func (*Context) HeadCSS added in v1.1.4 

func (ctx *Context) HeadCSS(urls []string, css string)

HeadCSS registers external stylesheets and/or inline CSS rules for the current page. On a full page load the tags are injected into the HTML <head> server-side (instant, no JS needed). On SPA navigations (WS actions) the same resources are injected into <head> via JS with deduplication so they are not loaded twice. 

ctx.HeadCSS(
    []string{"https://fonts.googleapis.com/css2?family=Oswald&display=swap"},
    `.hero { font-family: 'Oswald', sans-serif; }`,
)

Pass nil for urls if you only need inline CSS, or "" for css if you only need external links.

func (*Context) HeadJS added in v1.1.3 

func (ctx *Context) HeadJS(code string)

HeadJS registers a JavaScript block that runs once when the page loads. On a full page load the script is emitted as a <script> tag in <head>. On SPA navigations the code is prepended to the WS response so it executes before the DOM swap.

Use this for page-level setup (global functions, event listeners, etc.) instead of the Div("").JS(`...`) pattern. 

ctx.HeadJS(`
    window.toggleMobileNav = function() {
        var nav = document.getElementById('mobile-nav');
        if (nav) nav.classList.toggle('hidden');
    };
`)

func (*Context) Push added in v1.1.0 

func (ctx *Context) Push(js string) error

Push sends a JS string to THIS client connection immediately. Useful for sending additional updates outside the normal request/response. Returns an error if the connection's push context has been cancelled (e.g. the client navigated away or reported a missing target element).

func (*Context) WsData added in v1.1.0 

func (ctx *Context) WsData() map[string]any

WsData returns the raw WebSocket data map. Useful for passing to form validation (FormBuilder.Validate) before deserializing into a struct.

type DataTable added in v1.1.0 

type DataTable[T any] struct {
	// contains filtered or unexported fields
}

DataTable is a generic, configurable table component with built-in search, pagination, sorting indicators, export support, and per-column filtering. Data fetching is delegated to user-defined WS actions.

func NewDataTable added in v1.1.0 

func NewDataTable[T any](id string) *DataTable[T]

NewDataTable creates a new DataTable with the given wrapper ID. The ID is used on the outer div, enabling Replace() for live updates.

func (*DataTable[T]) Action added in v1.1.0 

func (dt *DataTable[T]) Action(actionName string) *DataTable[T]

Action sets the single WS action name for all table operations (search, sort, page, export). The action will receive: {operation, search, page, sort, dir} where operation is one of: "search", "sort", "page", "export"

func (*DataTable[T]) Col added in v1.1.0 

func (dt *DataTable[T]) Col(label string, opt ColOpt[T]) *DataTable[T]

Col adds a column with header label and options including the render function. The label is also used as the filter label when a Filter type is set.

func (*DataTable[T]) DataTableClass added in v1.1.0 

func (dt *DataTable[T]) DataTableClass(cls string) *DataTable[T]

DataTableClass sets the wrapper div's CSS classes.

func (*DataTable[T]) Detail added in v1.1.0 

func (dt *DataTable[T]) Detail(fn func(*T) *Node) *DataTable[T]

Detail sets a function that renders expandable detail content for each row. When set, a chevron toggle column is automatically added as the last column and clicking the row toggles an accordion-style detail panel below it.

func (*DataTable[T]) Empty added in v1.1.0 

func (dt *DataTable[T]) Empty(text string) *DataTable[T]

Empty overrides the text shown when there are no rows.

func (*DataTable[T]) Field added in v1.1.0 

func (dt *DataTable[T]) Field(fn func(*T) *Node, cls ...string) *DataTable[T]

Field adds a column whose cell content is a *Node returned by fn.

func (*DataTable[T]) FieldText added in v1.1.0 

func (dt *DataTable[T]) FieldText(fn func(*T) string, cls ...string) *DataTable[T]

FieldText adds a column whose cell content is plain text returned by fn. The text is set via .Text() on the <td>, which uses textContent (auto-escaped).

func (*DataTable[T]) FilterDate added in v1.1.0 

func (dt *DataTable[T]) FilterDate(colIdx int, label string) *DataTable[T]

FilterDate adds a date filter to a column with the given index. Deprecated: Use Col() with ColOpt{Filter: DateFilter(label)} instead.

func (*DataTable[T]) FilterNumber added in v1.1.0 

func (dt *DataTable[T]) FilterNumber(colIdx int, label string) *DataTable[T]

FilterNumber adds a number filter to a column with the given index. Deprecated: Use Col() with ColOpt{Filter: NumFilter(label)} instead.

func (*DataTable[T]) FilterSelect added in v1.1.0 

func (dt *DataTable[T]) FilterSelect(colIdx int, label string, options []string) *DataTable[T]

FilterSelect adds a select/multi-select filter to a column with the given index. Deprecated: Use Col() with ColOpt{Filter: SelectFilter(label, options)} instead.

func (*DataTable[T]) FilterText added in v1.1.0 

func (dt *DataTable[T]) FilterText(colIdx int, label string) *DataTable[T]

FilterText adds a text filter to a column with the given index. Deprecated: Use Col() with ColOpt{Filter: TxtFilter(label)} instead.

func (*DataTable[T]) FooterID added in v1.1.0 

func (dt *DataTable[T]) FooterID() string

FooterID returns the ID of the footer element for use with ToJSReplace.

func (*DataTable[T]) HasMore added in v1.1.0 

func (dt *DataTable[T]) HasMore(more bool) *DataTable[T]

HasMore indicates there are more rows to load (shows "load more" button).

func (*DataTable[T]) Head added in v1.1.0 

func (dt *DataTable[T]) Head(label string, cls ...string) *DataTable[T]

Head adds a text header column.

func (*DataTable[T]) HeadHTML added in v1.1.0 

func (dt *DataTable[T]) HeadHTML(label string, cls ...string) *DataTable[T]

HeadHTML adds a header column whose label is rendered as raw content.

func (*DataTable[T]) Locale added in v1.1.6 

func (dt *DataTable[T]) Locale(l *TableLocale) *DataTable[T]

Locale sets a per-instance locale for this table's UI strings. When nil (default), English text is used. 

table.Locale(&ui.TableLocale{Search: "Hľadať...", Apply: "Použiť"})

func (*DataTable[T]) Page added in v1.1.0 

func (dt *DataTable[T]) Page(page int) *DataTable[T]

Page sets the current page number (1-based).

func (*DataTable[T]) PageSize added in v1.1.0 

func (dt *DataTable[T]) PageSize(size int) *DataTable[T]

PageSize sets the number of items per page (default 10).

func (*DataTable[T]) Render added in v1.1.0 

func (dt *DataTable[T]) Render(data []*T) *Node

Render builds the full table Node tree from the provided data slice.

func (*DataTable[T]) RenderFooter added in v1.1.0 

func (dt *DataTable[T]) RenderFooter() *Node

RenderFooter builds just the footer node (for replacing after load-more).

func (*DataTable[T]) RenderRows added in v1.1.0 

func (dt *DataTable[T]) RenderRows(data []*T) []*Node

RenderRows builds only the <tr> rows (no wrapper, no thead, no toolbar). Use with ToJSAppend to the tbody ID (dt.id + "-tbody") for "load more".

func (*DataTable[T]) RowOffset added in v1.1.0 

func (dt *DataTable[T]) RowOffset(offset int) *DataTable[T]

RowOffset sets the starting offset for alternating row stripe colors. Used when appending rows to maintain correct striping.

func (*DataTable[T]) Search added in v1.1.0 

func (dt *DataTable[T]) Search(val string) *DataTable[T]

Search sets the current search query value (for re-rendering).

func (*DataTable[T]) SetFilterLabels added in v1.1.0 

func (dt *DataTable[T]) SetFilterLabels(badges []FilterBadge) *DataTable[T]

SetFilterLabels sets the active filter badges to display above the table.

func (*DataTable[T]) SetFilterValue added in v1.1.0 

func (dt *DataTable[T]) SetFilterValue(colIdx int, value *FilterValue) *DataTable[T]

SetFilterValue sets a filter value for a column.

func (*DataTable[T]) Sort added in v1.1.0 

func (dt *DataTable[T]) Sort(col int, dir string) *DataTable[T]

func (*DataTable[T]) Sortable added in v1.1.0 

func (dt *DataTable[T]) Sortable(columns ...int) *DataTable[T]

Sortable marks which column indices support click-to-sort.

func (*DataTable[T]) TableClass added in v1.1.0 

func (dt *DataTable[T]) TableClass(cls string) *DataTable[T]

TableClass overrides the <table> element's CSS classes.

func (*DataTable[T]) TbodyID added in v1.1.0 

func (dt *DataTable[T]) TbodyID() string

TbodyID returns the ID of the tbody element for use with ToJSAppend.

func (*DataTable[T]) TotalItems added in v1.1.0 

func (dt *DataTable[T]) TotalItems(count int) *DataTable[T]

TotalItems sets the total item count for display (e.g. "42 items").

func (*DataTable[T]) TotalPages added in v1.1.0 

func (dt *DataTable[T]) TotalPages(total int) *DataTable[T]

TotalPages sets the total number of pages. 

type DropdownBuilder struct {
	// contains filtered or unexported fields
}

DropdownBuilder constructs a dropdown menu attached to a trigger node.

func NewDropdown added in v1.1.0 

func NewDropdown(trigger *Node) *DropdownBuilder

NewDropdown creates a new DropdownBuilder with the given trigger node. 

func (d *DropdownBuilder) Build() *Node

Build compiles the dropdown into a *Node. 

func (d *DropdownBuilder) DropdownClass(cls string) *DropdownBuilder

DropdownClass appends additional CSS classes to the wrapper. 

func (d *DropdownBuilder) DropdownDanger(label string, action *Action, icon ...string) *DropdownBuilder

DropdownDanger adds a danger-styled menu item. 

func (d *DropdownBuilder) DropdownDivider() *DropdownBuilder

DropdownDivider adds a visual separator. 

func (d *DropdownBuilder) DropdownHeader(label string) *DropdownBuilder

DropdownHeader adds a non-interactive header label. 

func (d *DropdownBuilder) DropdownItem(label string, action *Action, icon ...string) *DropdownBuilder

DropdownItem adds a menu item with label, action, and optional icon. 

func (d *DropdownBuilder) DropdownPosition(p string) *DropdownBuilder

DropdownPosition sets the dropdown position relative to the trigger.

type Field added in v1.1.0 

type Field struct {
	Type        FieldType
	Name        string // maps to Attr("name",...) and struct json tag
	Label       string
	Placeholder string
	Value       string
	Checked     bool // only for FieldCheckbox
	Required    bool
	Pattern     string // regex pattern for client+server validation
	ErrMsg      string // custom error message (defaults to "<Label> is required")
	Options     []FieldOption
	Class       string // override input class
	WrapClass   string // override wrapper class
}

Field holds the declarative definition for one form field.

type FieldBuilder added in v1.1.0 

type FieldBuilder struct {
	// contains filtered or unexported fields
}

FieldBuilder provides chained configuration for a single field.

func (*FieldBuilder) Class added in v1.1.0 

func (fb *FieldBuilder) Class(cls string) *FieldBuilder

Class overrides the input element's CSS class.

func (*FieldBuilder) Err added in v1.1.0 

func (fb *FieldBuilder) Err(msg string) *FieldBuilder

Err sets a custom error message for the field.

func (*FieldBuilder) IsChecked added in v1.1.0 

func (fb *FieldBuilder) IsChecked(c bool) *FieldBuilder

IsChecked sets the checkbox checked state.

func (*FieldBuilder) Opts added in v1.1.0 

func (fb *FieldBuilder) Opts(pairs ...string) *FieldBuilder

Opts adds value:label option pairs. Format: "value:Label" or just "Label" (in which case value = lowercase label). An empty value like ":Select..." creates a placeholder option.

func (*FieldBuilder) PatternValidation added in v1.1.0 

func (fb *FieldBuilder) PatternValidation(p string) *FieldBuilder

PatternValidation sets a regex pattern for client+server validation.

func (*FieldBuilder) Placeholder added in v1.1.0 

func (fb *FieldBuilder) Placeholder(p string) *FieldBuilder

Placeholder sets the input placeholder text.

func (*FieldBuilder) Render added in v1.1.0 

func (fb *FieldBuilder) Render() *FormBuilder

Render returns the FormBuilder to continue chaining at the form level.

func (*FieldBuilder) Required added in v1.1.0 

func (fb *FieldBuilder) Required() *FieldBuilder

Required marks the field as required for validation.

func (*FieldBuilder) Value added in v1.1.0 

func (fb *FieldBuilder) Value(v string) *FieldBuilder

Value sets the current field value (for re-rendering after submit).

func (*FieldBuilder) WrapClass added in v1.1.0 

func (fb *FieldBuilder) WrapClass(cls string) *FieldBuilder

WrapClass overrides the wrapper div's CSS class.

type FieldOption added in v1.1.0 

type FieldOption struct {
	Value string
	Label string
}

FieldOption represents a value/label pair for select and radio fields.

type FieldType added in v1.1.0 

type FieldType int

FieldType enumerates supported field kinds. 

const (
	FieldText      FieldType = iota // <input type="text">
	FieldPassword                   // <input type="password">
	FieldEmail                      // <input type="email">
	FieldNumber                     // <input type="number">
	FieldPhone                      // <input type="tel">
	FieldDate                       // <input type="date">
	FieldTime                       // <input type="time">
	FieldDatetime                   // <input type="datetime-local">
	FieldUrl                        // <input type="url">
	FieldSearch                     // <input type="search">
	FieldTextarea                   // <textarea>
	FieldSelect                     // <select>
	FieldRadio                      // inline radios
	FieldRadioBtn                   // button-style radios (visible border cards)
	FieldRadioCard                  // hidden-peer card radios (peer-checked styling)
	FieldCheckbox                   // <input type="checkbox">
	FieldHidden                     // <input type="hidden">
)

type FilterBadge added in v1.1.0 

type FilterBadge struct {
	Label    string
	Value    string
	Column   int
	OnRemove string // JS to remove this filter
}

FilterBadge represents an active filter badge

type FilterLocale added in v1.1.6 

type FilterLocale struct {
	From        string // "From" label
	To          string // "To" label
	Today       string // date quick-select
	ThisWeek    string
	ThisMonth   string
	ThisQuarter string
	ThisYear    string
	LastMonth   string
	LastYear    string
}

FilterLocale holds translatable strings shared by filter UIs (date pickers, number/text operators). Embedded by both TableLocale and CollateLocale.

type FilterOperator added in v1.1.0 

type FilterOperator string

FilterOperator defines the operator for text/number filters 

const (
	OpContains   FilterOperator = "contains"
	OpStartsWith FilterOperator = "startswith"
	OpEquals     FilterOperator = "equals"
	OpRange      FilterOperator = "range"
	OpGTE        FilterOperator = "gte"
	OpLTE        FilterOperator = "lte"
	OpGT         FilterOperator = "gt"
	OpLT         FilterOperator = "lt"
)

type FilterType added in v1.1.0 

type FilterType string

FilterType defines the type of filter for a column 

const (
	FilterTypeText   FilterType = "text"
	FilterTypeDate   FilterType = "date"
	FilterTypeNumber FilterType = "number"
	FilterTypeSelect FilterType = "select"
)
const (
	NumFilter    FilterType = FilterTypeNumber
	TxtFilter    FilterType = FilterTypeText
	DateFilter   FilterType = FilterTypeDate
	SelectFilter FilterType = FilterTypeSelect
)

type FilterValue added in v1.1.0 

type FilterValue struct {
	Operator string   `json:"op"`
	Value    string   `json:"val"`
	Values   []string `json:"vals"` // for multi-select
	From     string   `json:"from"` // for date/number range
	To       string   `json:"to"`   // for date/number range
}

FilterValue represents a filter value for a column

type FormBuilder added in v1.1.0 

type FormBuilder struct {
	// contains filtered or unexported fields
}

FormBuilder accumulates fields and submit buttons, then renders to Nodes.

func NewForm added in v1.1.0 

func NewForm(id string) *FormBuilder

NewForm creates a new form builder with the given container ID.

func (*FormBuilder) Action added in v1.1.0 

func (f *FormBuilder) Action(name string) *FormBuilder

Action sets the WS action name that the form submits to.

func (*FormBuilder) Area added in v1.1.0 

func (f *FormBuilder) Area(label, name string) *FieldBuilder

func (*FormBuilder) Build added in v1.1.0 

func (f *FormBuilder) Build() *Node

Build renders the form into a Node tree. It emits a <form> element (with onsubmit prevented) and sets the HTML "form" attribute on every input, select, and textarea so they are formally associated. This lets multiple independent forms coexist on the same page without nesting <form> elements — inputs can live anywhere in the DOM.

func (*FormBuilder) Checkbox added in v1.1.0 

func (f *FormBuilder) Checkbox(label, name string) *FieldBuilder

func (*FormBuilder) DateField added in v1.1.0 

func (f *FormBuilder) DateField(label, name string) *FieldBuilder

func (*FormBuilder) DatetimeField added in v1.1.0 

func (f *FormBuilder) DatetimeField(label, name string) *FieldBuilder

func (*FormBuilder) Email added in v1.1.0 

func (f *FormBuilder) Email(label, name string) *FieldBuilder

func (*FormBuilder) ErrClass added in v1.1.0 

func (f *FormBuilder) ErrClass(cls string) *FormBuilder

ErrClass sets the CSS class for error messages.

func (*FormBuilder) FormClass added in v1.1.0 

func (f *FormBuilder) FormClass(cls string) *FormBuilder

FormClass overrides the form wrapper div class.

func (*FormBuilder) Hidden added in v1.1.0 

func (f *FormBuilder) Hidden(name string) *FieldBuilder

func (*FormBuilder) InputClass added in v1.1.0 

func (f *FormBuilder) InputClass(cls string) *FormBuilder

InputClass sets the default CSS class for all text-like inputs.

func (*FormBuilder) Number added in v1.1.0 

func (f *FormBuilder) Number(label, name string) *FieldBuilder

func (*FormBuilder) Password added in v1.1.0 

func (f *FormBuilder) Password(label, name string) *FieldBuilder

func (*FormBuilder) Phone added in v1.1.0 

func (f *FormBuilder) Phone(label, name string) *FieldBuilder

func (*FormBuilder) Radio added in v1.1.0 

func (f *FormBuilder) Radio(label, name string) *FieldBuilder

func (*FormBuilder) RadioBtn added in v1.1.0 

func (f *FormBuilder) RadioBtn(label, name string) *FieldBuilder

func (*FormBuilder) RadioCard added in v1.1.0 

func (f *FormBuilder) RadioCard(label, name string) *FieldBuilder

func (*FormBuilder) SearchField added in v1.1.0 

func (f *FormBuilder) SearchField(label, name string) *FieldBuilder

func (*FormBuilder) SelectField added in v1.1.0 

func (f *FormBuilder) SelectField(label, name string) *FieldBuilder

func (*FormBuilder) Submit added in v1.1.0 

func (f *FormBuilder) Submit(action, label, class string) *FormBuilder

Submit adds a submit button with an action value, label, and CSS class.

func (*FormBuilder) Text added in v1.1.0 

func (f *FormBuilder) Text(label, name string) *FieldBuilder

func (*FormBuilder) TimeField added in v1.1.0 

func (f *FormBuilder) TimeField(label, name string) *FieldBuilder

func (*FormBuilder) UrlField added in v1.1.0 

func (f *FormBuilder) UrlField(label, name string) *FieldBuilder

func (*FormBuilder) Validate added in v1.1.0 

func (f *FormBuilder) Validate(data map[string]any) FormErrors

Validate checks the data map against the form's field definitions. It returns a FormErrors map (empty if all valid). The data parameter should be the map[string]any from ctx.Body().

type FormErrors added in v1.1.0 

type FormErrors map[string]string

FormErrors holds field-level validation errors.

func (FormErrors) Get added in v1.1.0 

func (fe FormErrors) Get(name string) string

Get returns the error for a specific field name, or empty string.

func (FormErrors) HasErrors added in v1.1.0 

func (fe FormErrors) HasErrors() bool

HasErrors returns true if any field has an error.

type LayoutHandler added in v1.1.1 

type LayoutHandler func(ctx *Context) *Node

LayoutHandler builds a shared layout wrapping every page. The returned *Node tree must contain exactly one element with ID("__content__") where the page content will be injected.

type Node added in v1.1.0 

type Node struct {
	// contains filtered or unexported fields
}

Node represents a DOM element built in Go that compiles to JavaScript.

func A 

func A(class ...string) *Node

func Abbr added in v1.1.0 

func Abbr(class ...string) *Node

func Article added in v1.1.0 

func Article(class ...string) *Node

func Aside added in v1.1.0 

func Aside(class ...string) *Node

func Audio added in v1.1.0 

func Audio(class ...string) *Node

func B added in v1.1.0 

func B(class ...string) *Node

func Blockquote added in v1.1.0 

func Blockquote(class ...string) *Node

Block content

func Br added in v1.1.0 

func Br() *Node

func Button 

func Button(class ...string) *Node

func Canvas 

func Canvas(class ...string) *Node

func Caption added in v1.1.0 

func Caption(class ...string) *Node

Table (extended)

func Code added in v0.111.21 

func Code(class ...string) *Node

func Col added in v1.1.0 

func Col(class ...string) *Node

func Colgroup added in v1.1.0 

func Colgroup(class ...string) *Node

func ConfirmDialog added in v0.111.21 

func ConfirmDialog(title, message string, confirmAction *Action, opts ...ConfirmOpt) *Node

func Datalist added in v1.1.0 

func Datalist(class ...string) *Node

func Dd added in v1.1.0 

func Dd(class ...string) *Node

func Details added in v1.1.0 

func Details(class ...string) *Node

Interactive

func Dialog added in v1.1.0 

func Dialog(class ...string) *Node

func Div 

func Div(class ...string) *Node

Convenience constructors. All accept an optional single class string. 

Div("flex gap-4 items-center")
Button("px-4 py-2 bg-blue-600 text-white")
Span()  // no classes

func Dl added in v1.1.0 

func Dl(class ...string) *Node

func Dt added in v1.1.0 

func Dt(class ...string) *Node

func El 

func El(tag string, class ...string) *Node

El creates a node with an arbitrary tag and optional CSS class string. 

El("section", "max-w-5xl mx-auto")

func Em added in v1.1.0 

func Em(class ...string) *Node

func Embed added in v1.1.0 

func Embed(class ...string) *Node

func Fieldset added in v1.1.0 

func Fieldset(class ...string) *Node

Forms (extended)

func Figcaption added in v1.1.0 

func Figcaption(class ...string) *Node

func Figure added in v1.1.0 

func Figure(class ...string) *Node

func FilterPopup added in v1.1.0 

func FilterPopup(colIdx int, colLabel string, filterType FilterType, options []string, currentValue *FilterValue, l ...*TableLocale) *Node

FilterPopup renders a filter popup for a specific column. This should be used by the server to render the popup content when operation='openFilter' is received. 

func Footer(class ...string) *Node

func Form 

func Form(class ...string) *Node

func H1 added in v0.111.7 

func H1(class ...string) *Node

func H2 added in v0.111.7 

func H2(class ...string) *Node

func H3 added in v0.111.7 

func H3(class ...string) *Node

func H4 added in v1.1.0 

func H4(class ...string) *Node

func H5 added in v1.1.0 

func H5(class ...string) *Node

func H6 added in v1.1.0 

func H6(class ...string) *Node
func Header(class ...string) *Node

func Hr added in v1.1.0 

func Hr() *Node

func I 

func I(class ...string) *Node

func IArea 

func IArea(class ...string) *Node

func ICheckbox 

func ICheckbox(class ...string) *Node

func IColor added in v1.1.0 

func IColor(class ...string) *Node

func IDate 

func IDate(class ...string) *Node

func IDatetime added in v1.1.0 

func IDatetime(class ...string) *Node

func IEmail 

func IEmail(class ...string) *Node

func IFile added in v0.111.1 

func IFile(class ...string) *Node

func IHidden added in v1.1.0 

func IHidden(class ...string) *Node

func INumber 

func INumber(class ...string) *Node

func IPassword 

func IPassword(class ...string) *Node

func IPhone 

func IPhone(class ...string) *Node

func IRadio 

func IRadio(class ...string) *Node

func IRange added in v1.1.0 

func IRange(class ...string) *Node

func IReset added in v1.1.0 

func IReset(class ...string) *Node

func ISearch added in v1.1.0 

func ISearch(class ...string) *Node

func ISubmit added in v1.1.0 

func ISubmit(class ...string) *Node

func IText 

func IText(class ...string) *Node

Typed input constructors — shorthand for Input(<class>).Attr("type", "<type>").

func ITime 

func ITime(class ...string) *Node

func IUrl added in v1.1.0 

func IUrl(class ...string) *Node

func Icon 

func Icon(name string, class ...string) *Node

Icon renders a Material Symbols icon using Material Icons Round font. The name parameter is the icon ligature (e.g. "home", "settings"). Optional class strings are appended to the base icon class.

func IconText added in v1.1.0 

func IconText(icon, text string, class ...string) *Node

IconText renders a flex row containing a Material icon and text label. Optional class strings are applied to the outer wrapper.

func If 

func If(cond bool, node *Node) *Node

If returns the node only when cond is true, otherwise nil.

func Iframe added in v1.1.0 

func Iframe(class ...string) *Node

Embed

func Img 

func Img(class ...string) *Node

func Input 

func Input(class ...string) *Node

Void elements (self-closing)

func Label 

func Label(class ...string) *Node

func Legend added in v1.1.0 

func Legend(class ...string) *Node

func Li added in v1.1.0 

func Li(class ...string) *Node
func Link() *Node

func Main added in v1.1.0 

func Main(class ...string) *Node

func Map 

func Map[T any](items []T, fn func(T, int) *Node) []*Node

Map iterates a slice, calls fn for each item, and returns a parent with the results as children. Useful for rendering lists.

func Mark added in v1.1.0 

func Mark(class ...string) *Node

func Markdown 

func Markdown(class, content string) *Node

Markdown converts a markdown string to HTML and renders it inside a Div. Since the framework produces only document.createElement JS (no innerHTML setter on nodes), this uses .JS() to set innerHTML after the node mounts. The class parameter is applied to the container div.

func Meta added in v1.1.0 

func Meta() *Node

func Meter added in v1.1.0 

func Meter(class ...string) *Node
func Nav(class ...string) *Node

func Object added in v1.1.0 

func Object(class ...string) *Node

func Ol added in v1.1.0 

func Ol(class ...string) *Node

func Optgroup added in v1.1.0 

func Optgroup(class ...string) *Node

func Option 

func Option(class ...string) *Node

func Or 

func Or(cond bool, yes, no *Node) *Node

Or returns yes when cond is true, no otherwise.

func Output added in v1.1.0 

func Output(class ...string) *Node

func P 

func P(class ...string) *Node

func Picture added in v1.1.0 

func Picture(class ...string) *Node

func Pre added in v0.111.21 

func Pre(class ...string) *Node

func Progress added in v1.1.0 

func Progress(class ...string) *Node

func SVG added in v1.1.2 

func SVG(class ...string) *Node

func Section added in v1.1.0 

func Section(class ...string) *Node

func Select 

func Select(class ...string) *Node

func SkeletonCards added in v0.111.20 

func SkeletonCards() *Node

SkeletonCards returns an animated pulse skeleton of a 6-card responsive grid.

func SkeletonComponent 

func SkeletonComponent() *Node

SkeletonComponent returns an animated pulse skeleton of a single card with a title, 3 text lines, and a button placeholder.

func SkeletonForm 

func SkeletonForm() *Node

SkeletonForm returns an animated pulse skeleton of a form with 4 label+input pairs and a submit button placeholder.

func SkeletonList 

func SkeletonList() *Node

SkeletonList returns an animated pulse skeleton of 5 list rows, each with a circle avatar placeholder and two text line placeholders.

func SkeletonPage 

func SkeletonPage() *Node

SkeletonPage returns an animated pulse skeleton of a full page layout with a header bar, sidebar column, and main content area.

func SkeletonTable added in v0.111.20 

func SkeletonTable() *Node

SkeletonTable returns an animated pulse skeleton representing a 4-column table with a header row and 5 data rows.

func Small added in v1.1.0 

func Small(class ...string) *Node

func Source added in v1.1.0 

func Source(class ...string) *Node

func Span 

func Span(class ...string) *Node

func Strong added in v1.1.0 

func Strong(class ...string) *Node

Inline text

func Sub added in v1.1.0 

func Sub(class ...string) *Node

func Summary added in v1.1.0 

func Summary(class ...string) *Node

func Sup added in v1.1.0 

func Sup(class ...string) *Node

func Table 

func Table(class ...string) *Node

Table elements

func Tbody added in v1.1.0 

func Tbody(class ...string) *Node

func Td added in v1.1.0 

func Td(class ...string) *Node

func Textarea 

func Textarea(class ...string) *Node

func Tfoot added in v1.1.0 

func Tfoot(class ...string) *Node

func Th added in v1.1.0 

func Th(class ...string) *Node

func Thead added in v1.1.0 

func Thead(class ...string) *Node

func ThemeSwitcher 

func ThemeSwitcher(opts ...ThemeSwitcherOpt) *Node

ThemeSwitcher renders a tri-state toggle button that cycles through System → Light → Dark themes. It reads from localStorage("theme"), calls window.setTheme(mode), and updates its icon+label reactively.

func Time added in v1.1.0 

func Time(class ...string) *Node

func Tr added in v1.1.0 

func Tr(class ...string) *Node

func U added in v1.1.0 

func U(class ...string) *Node

func Ul added in v1.1.0 

func Ul(class ...string) *Node

func Video added in v1.1.0 

func Video(class ...string) *Node

Media / embed

func Wbr added in v1.1.0 

func Wbr() *Node

func (*Node) Attr added in v1.1.0 

func (n *Node) Attr(key, val string) *Node

Attr sets an arbitrary HTML attribute.

func (*Node) Class added in v1.1.0 

func (n *Node) Class(cls string) *Node

Class appends additional CSS classes (space-separated) to any classes already set via the constructor. Useful for conditional class additions.

func (*Node) ID added in v1.1.0 

func (n *Node) ID(id string) *Node

ID sets the element id attribute.

func (*Node) JS added in v1.1.0 

func (n *Node) JS(raw string) *Node

JS sets raw JavaScript to execute after this node is appended to the DOM.

func (*Node) On added in v1.1.0 

func (n *Node) On(event string, action *Action) *Node

On attaches a named event to a server action.

func (*Node) OnClick added in v1.1.0 

func (n *Node) OnClick(action *Action) *Node

OnClick attaches a click event that calls a server action via WS.

func (*Node) OnSubmit added in v1.1.0 

func (n *Node) OnSubmit(action *Action) *Node

OnSubmit attaches a submit event action.

func (*Node) Render added in v1.1.0 

func (n *Node) Render(children ...*Node) *Node

Render appends child nodes and returns this node. This is the primary way to compose a node tree. Nil children are silently skipped. 

Div("flex", "gap-4").Render(
    H1("text-3xl").Text("Title"),
    P("text-gray-600").Text("Description"),
)

func (*Node) Style added in v1.1.0 

func (n *Node) Style(key, val string) *Node

Style sets an inline style property.

func (*Node) Text added in v1.1.0 

func (n *Node) Text(t string) *Node

Text sets the textContent.

func (*Node) ToJS added in v1.1.0 

func (n *Node) ToJS() string

ToJS compiles the node tree into a self-executing JavaScript function that builds and appends the entire tree to document.body.

func (*Node) ToJSAppend added in v1.1.0 

func (n *Node) ToJSAppend(parentID string) string

ToJSAppend compiles JS that appends this node as a child of the target element.

func (*Node) ToJSInner added in v1.1.0 

func (n *Node) ToJSInner(targetID string) string

ToJSInner compiles JS that replaces the innerHTML of a target element with this node (sets target's children to just this node).

func (*Node) ToJSPrepend added in v1.1.0 

func (n *Node) ToJSPrepend(parentID string) string

ToJSPrepend compiles JS that prepends this node as the first child.

func (*Node) ToJSReplace added in v1.1.0 

func (n *Node) ToJSReplace(targetID string) string

ToJSReplace compiles JS that replaces an existing DOM element by its ID. The old element is found by ID, the new tree is built, and replaceWith() is called.

type PageHandler added in v1.1.0 

type PageHandler func(ctx *Context) *Node

PageHandler builds the initial DOM for a GET route.

type ProgressBuilder added in v1.1.0 

type ProgressBuilder struct {
	// contains filtered or unexported fields
}

ProgressBuilder constructs a progress bar component.

func NewProgress added in v1.1.0 

func NewProgress() *ProgressBuilder

NewProgress creates a new ProgressBuilder with default settings.

func (*ProgressBuilder) Animated added in v1.1.0 

func (p *ProgressBuilder) Animated(a bool) *ProgressBuilder

Animated enables animated stripe movement (implies striped).

func (*ProgressBuilder) Build added in v1.1.0 

func (p *ProgressBuilder) Build() *Node

Build compiles the progress bar into a *Node.

func (*ProgressBuilder) Indeterminate added in v1.1.0 

func (p *ProgressBuilder) Indeterminate(i bool) *ProgressBuilder

Indeterminate shows a bouncing bar with no specific value.

func (*ProgressBuilder) LabelPosition added in v1.1.0 

func (p *ProgressBuilder) LabelPosition(pos string) *ProgressBuilder

LabelPosition sets the label position: "inside" or "outside".

func (*ProgressBuilder) ProgressClass added in v1.1.0 

func (p *ProgressBuilder) ProgressClass(cls string) *ProgressBuilder

ProgressClass appends additional CSS classes to the outer wrapper.

func (*ProgressBuilder) ProgressColor added in v1.1.0 

func (p *ProgressBuilder) ProgressColor(c string) *ProgressBuilder

ProgressColor sets the bar background color class.

func (*ProgressBuilder) ProgressGradient added in v1.1.0 

func (p *ProgressBuilder) ProgressGradient(colors ...string) *ProgressBuilder

ProgressGradient sets gradient colors (overrides solid color).

func (*ProgressBuilder) ProgressLabel added in v1.1.0 

func (p *ProgressBuilder) ProgressLabel(l string) *ProgressBuilder

ProgressLabel sets a text label to display on or above the bar.

func (*ProgressBuilder) ProgressSize added in v1.1.0 

func (p *ProgressBuilder) ProgressSize(s string) *ProgressBuilder

ProgressSize sets the bar height: "xs", "sm", "md", "lg", "xl".

func (*ProgressBuilder) ProgressValue added in v1.1.0 

func (p *ProgressBuilder) ProgressValue(v int) *ProgressBuilder

ProgressValue sets the progress percentage, clamped to 0-100.

func (*ProgressBuilder) Striped added in v1.1.0 

func (p *ProgressBuilder) Striped(s bool) *ProgressBuilder

Striped enables diagonal stripe pattern on the bar.

type RadioStyle added in v1.1.0 

type RadioStyle = FieldType

RadioStyle is an alias kept for readability in the API.

type Response added in v1.1.0 

type Response struct {
	// contains filtered or unexported fields
}

Response collects multiple JS statements into a single response string.

func NewResponse added in v1.1.0 

func NewResponse() *Response

NewResponse creates an empty response builder.

func (*Response) Add added in v1.1.0 

func (r *Response) Add(js string) *Response

Add appends a JS string to the response.

func (*Response) Append added in v1.1.0 

func (r *Response) Append(parentID string, node *Node) *Response

Append adds a node append operation.

func (*Response) Back added in v1.1.0 

func (r *Response) Back() *Response

Back navigates back in browser history (history.back()).

func (*Response) Build added in v1.1.0 

func (r *Response) Build() string

Build joins all parts into a single JS string.

func (*Response) Inner added in v1.1.0 

func (r *Response) Inner(targetID string, node *Node) *Response

Render adds a node innerHTML replacement operation to the response.

func (*Response) Navigate added in v1.1.0 

func (r *Response) Navigate(url string) *Response

Navigate updates the browser URL via pushState without a page reload.

func (*Response) Remove added in v1.1.0 

func (r *Response) Remove(id string) *Response

Remove adds an element removal.

func (*Response) Replace added in v1.1.0 

func (r *Response) Replace(targetID string, node *Node) *Response

Replace adds a node replacement operation to the response.

func (*Response) Toast added in v1.1.0 

func (r *Response) Toast(variant, message string) *Response

Toast adds a notification.

type SimpleTable 

type SimpleTable struct {
	// contains filtered or unexported fields
}

SimpleTable builds a basic table from manually added cells. Rows are auto-wrapped based on numCols.

func NewSimpleTable added in v1.1.0 

func NewSimpleTable(numCols int, cls ...string) *SimpleTable

NewSimpleTable creates a new SimpleTable with the given number of columns.

func (*SimpleTable) Build added in v1.1.0 

func (t *SimpleTable) Build() *Node

Build renders the SimpleTable into a *Node.

func (*SimpleTable) Cell added in v1.1.0 

func (t *SimpleTable) Cell(node *Node) *SimpleTable

Cell adds a *Node cell to the table. When the current row reaches numCols, it is flushed and a new row starts automatically.

func (*SimpleTable) CellText added in v1.1.0 

func (t *SimpleTable) CellText(text string) *SimpleTable

CellText adds a plain text cell.

func (*SimpleTable) SimpleHeader added in v1.1.0 

func (t *SimpleTable) SimpleHeader(labels ...string) *SimpleTable

SimpleHeader sets the header labels for the table.

type StepProgressBuilder added in v1.1.0 

type StepProgressBuilder struct {
	// contains filtered or unexported fields
}

StepProgressBuilder constructs a simple step progress indicator.

func NewStepProgress added in v1.1.0 

func NewStepProgress(current, total int) *StepProgressBuilder

NewStepProgress creates a new StepProgressBuilder.

func (*StepProgressBuilder) Build added in v1.1.0 

func (s *StepProgressBuilder) Build() *Node

Build compiles the step progress into a *Node.

func (*StepProgressBuilder) Locale added in v1.1.6 

func (s *StepProgressBuilder) Locale(l *StepProgressLocale) *StepProgressBuilder

Locale sets a per-instance locale.

func (*StepProgressBuilder) StepClass added in v1.1.0 

func (s *StepProgressBuilder) StepClass(cls string) *StepProgressBuilder

StepClass appends additional CSS classes.

func (*StepProgressBuilder) StepColor added in v1.1.0 

func (s *StepProgressBuilder) StepColor(c string) *StepProgressBuilder

StepColor sets the fill bar color class.

func (*StepProgressBuilder) StepSize added in v1.1.0 

func (s *StepProgressBuilder) StepSize(sz string) *StepProgressBuilder

StepSize sets the bar height: "xs", "sm", "md", "lg", "xl".

type StepProgressLocale added in v1.1.6 

type StepProgressLocale struct {
	// StepOf formats "Step X of Y" — receives (current, total).
	StepOf func(current, total int) string
}

StepProgressLocale holds translatable strings for StepProgress.

type TableLocale added in v1.1.6 

type TableLocale struct {
	FilterLocale        // date/range labels shared with Collate
	Search       string // search input placeholder
	Apply        string // apply button
	Cancel       string // cancel button
	Reset        string // reset button
	Excel        string // export button
	LoadMore     string // load more button
	NoData       string // empty state
	SearchText   string // text filter input placeholder
	SelectAll    string // select all label
	ClearSelect  string // clear selection label
	Value        string // "Value" placeholder (number filter)
	Contains     string // text filter operator
	StartsWith   string // text filter operator
	Equals       string // text filter operator
	Range        string // number filter operator
	GreaterOrEq  string // ≥
	LessOrEq     string // ≤
	GreaterThan  string // >
	LessThan     string // <
	NumEquals    string // = (number)

	// ItemCount formats "X of Y" — receives (showing, total).
	ItemCount func(showing, total int) string
}

TableLocale holds all translatable strings used by DataTable. Create one only when you need non-English text; pass it via .Locale(). 

loc := &ui.TableLocale{Search: "Hľadať...", Apply: "Použiť", ...}
table := ui.NewDataTable[T]("t").Locale(loc)

type TabsBuilder added in v1.1.0 

type TabsBuilder struct {
	// contains filtered or unexported fields
}

TabsBuilder constructs a tabbed interface with multiple panels.

func NewTabs added in v1.1.0 

func NewTabs() *TabsBuilder

NewTabs creates a new TabsBuilder.

func (*TabsBuilder) Active added in v1.1.0 

func (t *TabsBuilder) Active(index int) *TabsBuilder

Active sets the initially active tab index (0-based).

func (*TabsBuilder) Build added in v1.1.0 

func (t *TabsBuilder) Build() *Node

Build compiles the tabs into a *Node.

func (*TabsBuilder) Tab added in v1.1.0 

func (t *TabsBuilder) Tab(label string, content *Node, icon ...string) *TabsBuilder

Tab adds a tab with label, content panel, and optional icon.

func (*TabsBuilder) TabStyle added in v1.1.0 

func (t *TabsBuilder) TabStyle(s string) *TabsBuilder

TabStyle sets the tab style: "underline", "pills", "boxed", "vertical".

func (*TabsBuilder) TabsClass added in v1.1.0 

func (t *TabsBuilder) TabsClass(cls string) *TabsBuilder

TabsClass appends additional CSS classes.

type ThemeSwitcherLocale added in v1.1.6 

type ThemeSwitcherLocale struct {
	ThemeAuto  string
	ThemeLight string
	ThemeDark  string
}

ThemeSwitcherLocale holds translatable strings for ThemeSwitcher.

type ThemeSwitcherOpt added in v1.1.6 

type ThemeSwitcherOpt struct {
	Class  string               // additional CSS class
	Locale *ThemeSwitcherLocale // per-instance locale; nil = English default
}

ThemeSwitcherOpt configures optional ThemeSwitcher settings.

type TooltipBuilder added in v1.1.0 

type TooltipBuilder struct {
	// contains filtered or unexported fields
}

TooltipBuilder wraps a trigger node with a tooltip overlay shown on hover.

func NewTooltip added in v1.1.0 

func NewTooltip(content string) *TooltipBuilder

NewTooltip creates a new TooltipBuilder with the given text content.

func (*TooltipBuilder) Delay added in v1.1.0 

func (t *TooltipBuilder) Delay(ms int) *TooltipBuilder

Delay sets the show delay in milliseconds. 0 = pure CSS (instant).

func (*TooltipBuilder) TooltipClass added in v1.1.0 

func (t *TooltipBuilder) TooltipClass(cls string) *TooltipBuilder

TooltipClass appends additional CSS classes.

func (*TooltipBuilder) TooltipPosition added in v1.1.0 

func (t *TooltipBuilder) TooltipPosition(p string) *TooltipBuilder

TooltipPosition sets the tooltip position: "top", "bottom", "left", "right".

func (*TooltipBuilder) TooltipVariant added in v1.1.0 

func (t *TooltipBuilder) TooltipVariant(v string) *TooltipBuilder

TooltipVariant sets the tooltip color variant.

func (*TooltipBuilder) Wrap added in v1.1.0 

func (t *TooltipBuilder) Wrap(trigger *Node) *Node

Wrap wraps the given trigger node in a tooltip container and returns it.

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.