h

package module

v1.1.1 Latest Latest Go to latest Published: Feb 24, 2026 License: MIT Imports: 6 Imported by: 0

Details

Valid go.mod file
Redistributable license
Tagged version
Stable version
Learn more about best practices

Repository

github.com/assaidy/hyper

Links

Open Source Insights

README ¶

hyper

A fast, type-safe HTML generator for Go.

Features

Auto-escaping - Strings are HTML-escaped automatically for security
Type-safe - Compile-time checking of your HTML structure
Zero dependencies - Pure Go standard library
Fast - Minimal allocations, direct writer output
Composable - Build complex layouts from simple components

Installation

go get github.com/assaidy/hyper

Quick Start

package main

import (
    "os"

    "github.com/assaidy/hyper"
)

func main() {
    page := h.Empty(
        h.DoctypeHtml(),
        h.Html(
            h.Head(
                h.Title("My Page"),
            ),
            h.Body(
                h.H1("Hello, World!"),
                h.P("Auto-escaped: <script>alert('xss')</script>"),
            ),
        ),
    )
    
    if err := page.Render(os.Stdout); err != nil {
        panic(err)
    }
}

Usage

Basic Elements

// Strings are auto-escaped
h.Div("Hello", " ", "World")  // <div>Hello World</div>

h.P("<script>alert('xss')</script>")
// <p>&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;</p>

// Raw HTML (not escaped. use with caution)
h.Div(h.RawText("<svg>...</svg>")) // <svg>...</svg>

// Numbers and booleans are auto-converted
h.P("Count: ", 42)           // <p>Count: 42</p>
h.P("Active: ", true)        // <p>Active: true</p>

Attributes

h.Div(h.KV{h.AttrClass: "container", h.AttrId: "main"}, "Content")
// <div class="container" id="main">Content</div>

Conditional Rendering

// Show element only if condition is true
h.If(isLoggedIn, h.Div("Welcome back!"))

// Choose between two options
h.IfElse(isAdmin, h.Div("Admin"), h.Div("User"))

Lists and Iteration

items := []string{"Apple", "Banana"}

// Map over slice
h.Ul(
    h.MapSlice(items, func(item string) h.Node {
        return h.Li(item)
    }),
)

// Repeat N times
h.Div(
    h.Repeat(3, func() h.Node {
        return h.P("Repeated")
    }),
)

With Tailwind CSS

h.Div(h.KV{h.AttrClass: "bg-gray-100 min-h-screen p-8"},
    h.Div(h.KV{h.AttrClass: "max-w-4xl mx-auto"},
        h.H1(h.KV{h.AttrClass: "text-4xl font-bold text-gray-800"}, "Title"),
        h.P(h.KV{h.AttrClass: "text-gray-600 mt-2"}, "Description"),
        h.Button(h.KV{h.AttrClass: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"},
            "Click Me",
        ),
    ),
)

With HTMX

// Include htmx library
hx.Script()

// HTMX button that loads content
h.Button(h.KV{
    h.AttrClass:     "px-4 py-2 bg-blue-500 text-white rounded",
    hx.AttrGet:      "/api/users",
    hx.AttrTarget:   "#users-list",
    hx.AttrSwap:     hx.SwapOuterHtml,
},
    "Load Users",
)

// HTMX form
h.Form(h.KV{
    hx.AttrPost:     "/api/submit",
    hx.AttrTarget:   "#result",
    h.AttrClass:     "space-y-4",
},
    h.Input(h.KV{
        h.AttrType:  h.TypeText,
        h.AttrName:  "message",
        h.AttrClass: "border rounded px-3 py-2",
    }),
    h.Button(h.KV{h.AttrType: h.TypeSubmit, h.AttrClass: "bg-blue-500 text-white px-4 py-2 rounded"},
        "Submit",
    ),
)

Complete Example

package main

import (
    "os"

    "github.com/assaidy/hyper"
    "github.com/assaidy/hyper/htmx"
)

func main() {
    users := []string{"Alice", "Bob", "Charlie"}
    isAdmin := true

    page := h.Empty(
        h.DoctypeHtml(),
        h.Html(h.KV{h.AttrLang: "en"},
            h.Head(
                h.Title("Dashboard"),
                hx.Script(),
                h.Script(h.KV{h.AttrSrc: "https://cdn.tailwindcss.com"}),
            ),
            h.Body(h.KV{h.AttrClass: "bg-gray-100 p-8"},
                h.Div(h.KV{h.AttrClass: "max-w-2xl mx-auto"},
                    h.H1(h.KV{h.AttrClass: "text-3xl font-bold mb-4"}, "Dashboard"),
                    
                    // Conditional admin panel
                    h.If(isAdmin,
                        h.Div(h.KV{h.AttrClass: "bg-blue-50 p-4 rounded mb-4"},
                            h.P(h.KV{h.AttrClass: "font-semibold"}, "Admin Panel"),
                        ),
                    ),
                    
                    // User count
                    h.P("Total users: ", len(users)),

                    // HTMX button to refresh users
                    h.Button(h.KV{
                        h.AttrClass:      "px-4 py-2 bg-blue-500 text-white rounded mt-4",
                        hx.AttrGet:      "/api/users",
                        hx.AttrTarget:   "#users-list",
                        hx.AttrSwap:     hx.SwapOuterHtml,
                    },
                        "Refresh Users",
                    ),
                    
                    // User list
                    h.Ul(h.KV{h.AttrClass: "space-y-2 mt-4", h.AttrId: "users-list"},
                        h.MapSlice(users, func(name string) h.Node {
                            return h.Li(h.KV{h.AttrClass: "p-2 bg-white rounded shadow"},
                                name,
                            )
                        }),
                    ),
                ),
            ),
        ),
    )

    if err := page.Render(os.Stdout); err != nil {
        panic(err)
    }
}

Documentation ¶

Index ¶

Constants
func IfElse[T any](condition bool, result, alternative T) T
func Render(w io.Writer, node Node) error
type Element
- func (me Element) Render(w io.Writer) error
type KV
type Node
type RawText
- func (me RawText) Render(w io.Writer) error
type Text
- func (me Text) Render(w io.Writer) error

Constants ¶

View Source

const (
	AttrAccept              = "accept"
	AttrAcceptCharset       = "accept-charset"
	AttrAccessKey           = "accesskey"
	AttrAction              = "action"
	AttrAlign               = "align"
	AttrAllow               = "allow"
	AttrAlpha               = "alpha"
	AttrAlt                 = "alt"
	AttrAs                  = "as"
	AttrAsync               = "async"
	AttrAutocapitalize      = "autocapitalize"
	AttrAutocomplete        = "autocomplete"
	AttrAutofocus           = "autofocus"
	AttrAutoplay            = "autoplay"
	AttrBackground          = "background"
	AttrBgColor             = "bgcolor"
	AttrBorder              = "border"
	AttrCapture             = "capture"
	AttrCharset             = "charset"
	AttrChecked             = "checked"
	AttrCite                = "cite"
	AttrClass               = "class"
	AttrColor               = "color"
	AttrColorSpace          = "colorspace"
	AttrCols                = "cols"
	AttrColSpan             = "colspan"
	AttrContent             = "content"
	AttrContentEditable     = "contenteditable"
	AttrControls            = "controls"
	AttrCoords              = "coords"
	AttrCrossOrigin         = "crossorigin"
	AttrCsp                 = "csp"
	AttrData                = "data"
	AttrDateTime            = "datetime"
	AttrDecoding            = "decoding"
	AttrDefault             = "default"
	AttrDefer               = "defer"
	AttrDir                 = "dir"
	AttrDirName             = "dirname"
	AttrDisabled            = "disabled"
	AttrDownload            = "download"
	AttrDraggable           = "draggable"
	AttrEnctype             = "enctype"
	AttrEnterKeyHint        = "enterkeyhint"
	AttrElementTiming       = "elementtiming"
	AttrForm                = "form"
	AttrFormAction          = "formaction"
	AttrFormEnctype         = "formenctype"
	AttrFormMethod          = "formmethod"
	AttrFormNoValidate      = "formnovalidate"
	AttrFormTarget          = "formtarget"
	AttrFetchPriority       = "fetchpriority"
	AttrHeaders             = "headers"
	AttrHeight              = "height"
	AttrHidden              = "hidden"
	AttrHigh                = "high"
	AttrHref                = "href"
	AttrHrefLang            = "hreflang"
	AttrHttpEquiv           = "http-equiv"
	AttrID                  = "id"
	AttrIntegrity           = "integrity"
	AttrInputMode           = "inputmode"
	AttrIsMap               = "ismap"
	AttrItemProp            = "itemprop"
	AttrKind                = "kind"
	AttrLabel               = "label"
	AttrLang                = "lang"
	AttrLanguage            = "language"
	AttrLoading             = "loading"
	AttrList                = "list"
	AttrLoop                = "loop"
	AttrLow                 = "low"
	AttrMax                 = "max"
	AttrMaxLength           = "maxlength"
	AttrMinLength           = "minlength"
	AttrMedia               = "media"
	AttrMethod              = "method"
	AttrMin                 = "min"
	AttrMultiple            = "multiple"
	AttrMuted               = "muted"
	AttrName                = "name"
	AttrNoValidate          = "novalidate"
	AttrOnAbort             = "onAbort"
	AttrOnActivate          = "onActivate"
	AttrOnAfterPrint        = "onAfterPrint"
	AttrOnAfterUpdate       = "onAfterUpdate"
	AttrOnBeforeActivate    = "onBeforeActivate"
	AttrOnBeforeCopy        = "onBeforeCopy"
	AttrOnBeforeCut         = "onBeforeCut"
	AttrOnBeforeDeactivate  = "onBeforeDeactivate"
	AttrOnBeforeEditFocus   = "onBeforeEditFocus"
	AttrOnBeforePaste       = "onBeforePaste"
	AttrOnBeforePrint       = "onBeforePrint"
	AttrOnBeforeUnload      = "onBeforeUnload"
	AttrOnBeforeUpdate      = "onBeforeUpdate"
	AttrOnBegin             = "onBegin"
	AttrOnBlur              = "onBlur"
	AttrOnBounce            = "onBounce"
	AttrOnCellChange        = "onCellChange"
	AttrOnChange            = "onChange"
	AttrOnClick             = "onClick"
	AttrOnContextMenu       = "onContextMenu"
	AttrOnControlSelect     = "onControlSelect"
	AttrOnCopy              = "onCopy"
	AttrOnCut               = "onCut"
	AttrOnDataAvailable     = "onDataAvailable"
	AttrOnDataSetChanged    = "onDataSetChanged"
	AttrOnDataSetComplete   = "onDataSetComplete"
	AttrOnDblClick          = "onDblClick"
	AttrOnDeactivate        = "onDeactivate"
	AttrOnDrag              = "onDrag"
	AttrOnDragEnd           = "onDragEnd"
	AttrOnDragLeave         = "onDragLeave"
	AttrOnDragEnter         = "onDragEnter"
	AttrOnDragOver          = "onDragOver"
	AttrOnDragDrop          = "onDragDrop"
	AttrOnDragStart         = "onDragStart"
	AttrOnDrop              = "onDrop"
	AttrOnEnd               = "onEnd"
	AttrOnError             = "onError"
	AttrOnErrorUpdate       = "onErrorUpdate"
	AttrOnFilterChange      = "onFilterChange"
	AttrOnFinish            = "onFinish"
	AttrOnFocus             = "onFocus"
	AttrOnFocusIn           = "onFocusIn"
	AttrOnFocusOut          = "onFocusOut"
	AttrOnHashChange        = "onHashChange"
	AttrOnHelp              = "onHelp"
	AttrOnInput             = "onInput"
	AttrOnKeyDown           = "onKeyDown"
	AttrOnKeyPress          = "onKeyPress"
	AttrOnKeyUp             = "onKeyUp"
	AttrOnLayoutComplete    = "onLayoutComplete"
	AttrOnLoad              = "onLoad"
	AttrOnLoseCapture       = "onLoseCapture"
	AttrOnMediaComplete     = "onMediaComplete"
	AttrOnMediaError        = "onMediaError"
	AttrOnMessage           = "onMessage"
	AttrOnMouseDown         = "onMouseDown"
	AttrOnMouseEnter        = "onMouseEnter"
	AttrOnMouseLeave        = "onMouseLeave"
	AttrOnMouseMove         = "onMouseMove"
	AttrOnMouseOut          = "onMouseOut"
	AttrOnMouseOver         = "onMouseOver"
	AttrOnMouseUp           = "onMouseUp"
	AttrOnMouseWheel        = "onMouseWheel"
	AttrOnMove              = "onMove"
	AttrOnMoveEnd           = "onMoveEnd"
	AttrOnMoveStart         = "onMoveStart"
	AttrOnOffline           = "onOffline"
	AttrOnOnline            = "onOnline"
	AttrOnOutOfSync         = "onOutOfSync"
	AttrOnPaste             = "onPaste"
	AttrOnPause             = "onPause"
	AttrOnPopState          = "onPopState"
	AttrOnProgress          = "onProgress"
	AttrOnPropertyChange    = "onPropertyChange"
	AttrOnReadyStateChange  = "onReadyStateChange"
	AttrOnRedo              = "onRedo"
	AttrOnRepeat            = "onRepeat"
	AttrOnReset             = "onReset"
	AttrOnResize            = "onResize"
	AttrOnResizeEnd         = "onResizeEnd"
	AttrOnResizeStart       = "onResizeStart"
	AttrOnResume            = "onResume"
	AttrOnReverse           = "onReverse"
	AttrOnRowsEnter         = "onRowsEnter"
	AttrOnRowExit           = "onRowExit"
	AttrOnRowDelete         = "onRowDelete"
	AttrOnRowInserted       = "onRowInserted"
	AttrOnScroll            = "onScroll"
	AttrOnSeek              = "onSeek"
	AttrOnSelect            = "onSelect"
	AttrOnSelectionChange   = "onSelectionChange"
	AttrOnSelectStart       = "onSelectStart"
	AttrOnStart             = "onStart"
	AttrOnStop              = "onStop"
	AttrOnStorage           = "onStorage"
	AttrOnSyncRestored      = "onSyncRestored"
	AttrOnSubmit            = "onSubmit"
	AttrOnTimeError         = "onTimeError"
	AttrOnTrackChange       = "onTrackChange"
	AttrOnUndo              = "onUndo"
	AttrOnUnload            = "onUnload"
	AttrOnURLFlip           = "onURLFlip"
	AttrOpen                = "open"
	AttrOptimum             = "optimum"
	AttrPattern             = "pattern"
	AttrPing                = "ping"
	AttrPlaceholder         = "placeholder"
	AttrPlaysInline         = "playsinline"
	AttrPoster              = "poster"
	AttrPopoverTargetAction = "popovertargetaction"
	AttrPreload             = "preload"
	AttrReadonly            = "readonly"
	AttrReferrerPolicy      = "referrerpolicy"
	AttrRel                 = "rel"
	AttrRequired            = "required"
	AttrReversed            = "reversed"
	AttrRole                = "role"
	AttrRows                = "rows"
	AttrRowSpan             = "rowspan"
	AttrSandbox             = "sandbox"
	AttrScope               = "scope"
	AttrSelected            = "selected"
	AttrShape               = "shape"
	AttrSize                = "size"
	AttrSizes               = "sizes"
	AttrSlot                = "slot"
	AttrSpan                = "span"
	AttrSpellCheck          = "spellcheck"
	AttrSrc                 = "src"
	AttrSrcDoc              = "srcdoc"
	AttrSrcLang             = "srclang"
	AttrSrcSet              = "srcset"
	AttrStart               = "start"
	AttrStep                = "step"
	AttrStyle               = "style"
	AttrSummary             = "summary"
	AttrTabIndex            = "tabindex"
	AttrTarget              = "target"
	AttrTitle               = "title"
	AttrTranslate           = "translate"
	AttrType                = "type"
	AttrUseMap              = "usemap"
	AttrValue               = "value"
	AttrWidth               = "width"
	AttrWrap                = "wrap"
)

Attr* constants provide compile-time safety for HTML attribute names. Using these constants prevents typos and enables LSP autocompletion.

View Source

const (
	TypeText          = "text"
	TypePassword      = "password"
	TypeCheckbox      = "checkbox"
	TypeRadio         = "radio"
	TypeSubmit        = "submit"
	TypeReset         = "reset"
	TypeButton        = "button"
	TypeFile          = "file"
	TypeHidden        = "hidden"
	TypeImage         = "image"
	TypeColor         = "color"
	TypeDate          = "date"
	TypeDateTime      = "datetime"
	TypeDateTimeLocal = "datetime-local"
	TypeEmail         = "email"
	TypeMonth         = "month"
	TypeNumber        = "number"
	TypeRange         = "range"
	TypeSearch        = "search"
	TypeTel           = "tel"
	TypeTime          = "time"
	TypeUrl           = "url"
	TypeWeek          = "week"
)

Type* constants are valid values for the type attribute on various elements.

View Source

const (
	RelAlternate             = "alternate"
	RelAuthor                = "author"
	RelBookmark              = "bookmark"
	RelCanonical             = "canonical"
	RelCompressionDictionary = "compression-dictionary"
	RelDnsPrefetch           = "dns-prefetch"
	RelExternal              = "external"
	RelHelp                  = "help"
	RelIcon                  = "icon"
	RelLicense               = "license"
	RelManifest              = "manifest"
	RelModulePreload         = "modulepreload"
	RelNext                  = "next"
	RelNoFollow              = "nofollow"
	RelNoOpener              = "noopener"
	RelNoReferrer            = "noreferrer"
	RelOpener                = "opener"
	RelPingback              = "pingback"
	RelPreconnect            = "preconnect"
	RelPrefetch              = "prefetch"
	RelPreload               = "preload"
	RelPrerender             = "prerender"
	RelPrev                  = "prev"
	RelSearch                = "search"
	RelStylesheet            = "stylesheet"
	RelTag                   = "tag"
)

Rel* constants are valid values for the rel attribute.

View Source

const (
	TargetBlank     = "_blank"
	TargetSelf      = "_self"
	TargetParent    = "_parent"
	TargetTop       = "_top"
	TargetFramename = "framename"
)

Target* constants are valid values for the target attribute.

View Source

const (
	MethodGet  = "get"
	MethodPost = "post"
)

Method* constants are valid values for the method attribute on <form>.

View Source

const (
	EnctypeUrlEncoded    = "application/x-www-form-urlencoded"
	EnctypeMultipartForm = "multipart/form-data"
	EnctypePlainText     = "text/plain"
)

Enctype* constants are valid values for the enctype attribute on <form>.

View Source

const (
	CrossOriginAnonymous      = "anonymous"
	CrossOriginUseCredentials = "use-credentials"
)

CrossOrigin* constants are valid values for the crossorigin attribute.

View Source

const (
	DirLtr  = "ltr"
	DirRtl  = "rtl"
	DirAuto = "auto"
)

Dir* constants are valid values for the dir attribute.

View Source

const (
	TranslateYes = "yes"
	TranslateNo  = "no"
)

Translate* constants are valid values for the translate attribute.

View Source

const (
	PreloadNone     = "none"
	PreloadMetadata = "metadata"
	PreloadAuto     = "auto"
)

Preload* constants are valid values for the preload attribute on <audio> and <video>.

View Source

const (
	LoadingLazy  = "lazy"
	LoadingEager = "eager"
)

Loading* constants are valid values for the loading attribute on <img> and <iframe>.

View Source

const (
	DecodingAsync = "async"
	DecodingSync  = "sync"
	DecodingAuto  = "auto"
)

Decoding* constants are valid values for the decoding attribute on <img>.

View Source

const (
	ReferrerPolicyNoReferrer                  = "no-referrer"
	ReferrerPolicyNoReferrerWhenDowngrade     = "no-referrer-when-downgrade"
	ReferrerPolicyOrigin                      = "origin"
	ReferrerPolicyOriginWhenCrossOrigin       = "origin-when-cross-origin"
	ReferrerPolicySameOrigin                  = "same-origin"
	ReferrerPolicyStrictOriginWhenCrossOrigin = "strict-origin-when-cross-origin"
	ReferrerPolicyUnsafeUrl                   = "unsafe-url"
)

ReferrerPolicy* constants are valid values for the referrerpolicy attribute.

View Source

const (
	FetchPriorityLow  = "low"
	FetchPriorityHigh = "high"
	FetchPriorityAuto = "auto"
)

FetchPriority* constants are valid values for the fetchpriority attribute.

View Source

const (
	EnterKeyHintEnter    = "enter"
	EnterKeyHintDone     = "done"
	EnterKeyHintGo       = "go"
	EnterKeyHintNext     = "next"
	EnterKeyHintPrevious = "previous"
	EnterKeyHintSearch   = "search"
	EnterKeyHintSend     = "send"
)

EnterKeyHint* constants are valid values for the enterkeyhint attribute.

View Source

const (
	WrapHard = "hard"
	WrapSoft = "soft"
	WrapOff  = "off"
)

Wrap* constants are valid values for the wrap attribute on <textarea>.

View Source

const (
	ShapeDefault = "default"
	ShapeCircle  = "circle"
	ShapePoly    = "poly"
	ShapeRect    = "rect"
)

Shape* constants are valid values for the shape attribute on <area>.

View Source

const (
	SpellCheckTrue  = "true"
	SpellCheckFalse = "false"
)

Spellcheck* constants are valid values for the spellcheck attribute.

View Source

const (
	ContentEditableTrue          = "true"
	ContentEditableFalse         = "false"
	ContentEditablePlaintextOnly = "plaintext-only"
)

ContentEditable* constants are valid values for the contenteditable attribute.

View Source

const (
	DraggableTrue  = "true"
	DraggableFalse = "false"
)

Draggable* constants are valid values for the draggable attribute.

View Source

const (
	InputModeNone    = "none"
	InputModeText    = "text"
	InputModeDecimal = "decimal"
	InputModeNumeric = "numeric"
	InputModeTel     = "tel"
	InputModeSearch  = "search"
	InputModeEmail   = "email"
	InputModeUrl     = "url"
)

InputMode* constants are valid values for the inputmode attribute.

View Source

const (
	PopoverTargetActionHide   = "hide"
	PopoverTargetActionShow   = "show"
	PopoverTargetActionToggle = "toggle"
)

PopoverTargetAction* constants are valid values for the popovertargetaction attribute.

View Source

const (
	AutocompleteOff                 = "off"
	AutocompleteOn                  = "on"
	AutocompleteName                = "name"
	AutocompleteHonorificPrefix     = "honorific-prefix"
	AutocompleteGivenName           = "given-name"
	AutocompleteAdditionalName      = "additional-name"
	AutocompleteFamilyName          = "family-name"
	AutocompleteHonorificSuffix     = "honorific-suffix"
	AutocompleteNickname            = "nickname"
	AutocompleteEmail               = "email"
	AutocompleteUsername            = "username"
	AutocompleteNewPassword         = "new-password"
	AutocompleteCurrentPassword     = "current-password"
	AutocompleteOneTimeCode         = "one-time-code"
	AutocompleteOrganizationTitle   = "organization-title"
	AutocompleteOrganization        = "organization"
	AutocompleteStreetAddress       = "street-address"
	AutocompleteAddressLine1        = "address-line1"
	AutocompleteAddressLine2        = "address-line2"
	AutocompleteAddressLine3        = "address-line3"
	AutocompleteAddressLevel4       = "address-level4"
	AutocompleteAddressLevel3       = "address-level3"
	AutocompleteAddressLevel2       = "address-level2"
	AutocompleteAddressLevel1       = "address-level1"
	AutocompleteCountry             = "country"
	AutocompleteCountryName         = "country-name"
	AutocompleteCcName              = "cc-name"
	AutocompleteCcGivenName         = "cc-given-name"
	AutocompleteCcAdditionalName    = "cc-additional-name"
	AutocompleteCcFamilyName        = "cc-family-name"
	AutocompleteCcNumber            = "cc-number"
	AutocompleteCcExp               = "cc-exp"
	AutocompleteCcExpMonth          = "cc-exp-month"
	AutocompleteCcExpYear           = "cc-exp-year"
	AutocompleteCcCsc               = "cc-csc"
	AutocompleteCcType              = "cc-type"
	AutocompleteTransactionCurrency = "transaction-currency"
	AutocompleteTransactionAmount   = "transaction-amount"
	AutocompleteLanguage            = "language"
	AutocompleteBday                = "bday"
	AutocompleteBdayDay             = "bday-day"
	AutocompleteBdayMonth           = "bday-month"
	AutocompleteBdayYear            = "bday-year"
	AutocompleteSex                 = "sex"
	AutocompleteTelCountryCode      = "tel-country-code"
	AutocompleteTelNational         = "tel-national"
	AutocompleteTelAreaCode         = "tel-area-code"
	AutocompleteTelLocal            = "tel-local"
	AutocompleteTelExtension        = "tel-extension"
	AutocompleteImpp                = "impp"
	AutocompleteUrl                 = "url"
	AutocompletePhoto               = "photo"
)

Autocomplete* constants are valid values for the autocomplete attribute.

View Source

const (
	SandboxAllowForms                         = "allow-forms"
	SandboxAllowModals                        = "allow-modals"
	SandboxAllowOrientationLock               = "allow-orientation-lock"
	SandboxAllowPointerLock                   = "allow-pointer-lock"
	SandboxAllowPopups                        = "allow-popups"
	SandboxAllowPopupsToEscapeSandbox         = "allow-popups-to-escape-sandbox"
	SandboxAllowPresentation                  = "allow-presentation"
	SandboxAllowSameOrigin                    = "allow-same-origin"
	SandboxAllowScripts                       = "allow-scripts"
	SandboxAllowTopNavigation                 = "allow-top-navigation"
	SandboxAllowTopNavigationByUserActivation = "allow-top-navigation-by-user-activation"
)

Sandbox* constants are valid values for the sandbox attribute on <iframe>.

View Source

const (
	EventAbort                       = "abort"
	EventAfterPrint                  = "afterprint"
	EventAnimationEnd                = "animationend"
	EventAnimationIteration          = "animationiteration"
	EventAnimationStart              = "animationstart"
	EventAppInstalled                = "appinstalled"
	EventAudioProcess                = "audioprocess"
	EventAudioEnd                    = "audioend"
	EventAudioStart                  = "audiostart"
	EventBeforePrint                 = "beforeprint"
	EventBeforeUnload                = "beforeunload"
	EventBeginEvent                  = "beginEvent"
	EventBlur                        = "blur"
	EventBoundary                    = "boundary"
	EventCached                      = "cached"
	EventCanPlay                     = "canplay"
	EventCanPlayThrough              = "canplaythrough"
	EventChange                      = "change"
	EventChargingChange              = "chargingchange"
	EventChargingTimeChange          = "chargingtimechange"
	EventChecking                    = "checking"
	EventClick                       = "click"
	EventClose                       = "close"
	EventComplete                    = "complete"
	EventCompositionEnd              = "compositionend"
	EventCompositionStart            = "compositionstart"
	EventCompositionUpdate           = "compositionupdate"
	EventContextMenu                 = "contextmenu"
	EventCopy                        = "copy"
	EventCut                         = "cut"
	EventDblClick                    = "dblclick"
	EventDeviceChange                = "devicechange"
	EventDeviceLight                 = "devicelight"
	EventDeviceMotion                = "devicemotion"
	EventDeviceOrientation           = "deviceorientation"
	EventDeviceProximity             = "deviceproximity"
	EventDischargingTimeChange       = "dischargingtimechange"
	EventDomActivate                 = "DOMActivate"
	EventDomAttributeNameChanged     = "DOMAttributeNameChanged"
	EventDomAttrModified             = "DOMAttrModified"
	EventDomCharacterDataModified    = "DOMCharacterDataModified"
	EventDomContentLoaded            = "DOMContentLoaded"
	EventDomElementNameChanged       = "DOMElementNameChanged"
	EventDomFocusIn                  = "DOMFocusIn"
	EventDomFocusOut                 = "DOMFocusOut"
	EventDomNodeInserted             = "DOMNodeInserted"
	EventDomNodeInsertedIntoDocument = "DOMNodeInsertedIntoDocument"
	EventDomNodeRemoved              = "DOMNodeRemoved"
	EventDomNodeRemovedFromDocument  = "DOMNodeRemovedFromDocument"
	EventDomSubtreeModified          = "DOMSubtreeModified"
	EventDownloading                 = "downloading"
	EventDrag                        = "drag"
	EventDragEnd                     = "dragend"
	EventDragEnter                   = "dragenter"
	EventDragLeave                   = "dragleave"
	EventDragOver                    = "dragover"
	EventDragStart                   = "dragstart"
	EventDrop                        = "drop"
	EventDurationChange              = "durationchange"
	EventEmptied                     = "emptied"
	EventEnd                         = "end"
	EventEnded                       = "ended"
	EventEndEvent                    = "endEvent"
	EventError                       = "error"
	EventFocus                       = "focus"
	EventFocusIn                     = "focusin"
	EventFocusOut                    = "focusout"
	EventFullscreenChange            = "fullscreenchange"
	EventFullscreenError             = "fullscreenerror"
	EventGamepadConnected            = "gamepadconnected"
	EventGamepadDisconnected         = "gamepaddisconnected"
	EventGotPointerCapture           = "gotpointercapture"
	EventHashChange                  = "hashchange"
	EventLostPointerCapture          = "lostpointercapture"
	EventInput                       = "input"
	EventInvalid                     = "invalid"
	EventKeyDown                     = "keydown"
	EventKeyPress                    = "keypress"
	EventKeyUp                       = "keyup"
	EventLanguageChange              = "languagechange"
	EventLevelChange                 = "levelchange"
	EventLoad                        = "load"
	EventLoadedData                  = "loadeddata"
	EventLoadedMetadata              = "loadedmetadata"
	EventLoadEnd                     = "loadend"
	EventLoadStart                   = "loadstart"
	EventMark                        = "mark"
	EventMessage                     = "message"
	EventMessageError                = "messageerror"
	EventMouseDown                   = "mousedown"
	EventMouseEnter                  = "mouseenter"
	EventMouseLeave                  = "mouseleave"
	EventMouseMove                   = "mousemove"
	EventMouseOut                    = "mouseout"
	EventMouseOver                   = "mouseover"
	EventMouseUp                     = "mouseup"
	EventNoMatch                     = "nomatch"
	EventNotificationClick           = "notificationclick"
	EventNoUpdate                    = "noupdate"
	EventObsolete                    = "obsolete"
	EventOffline                     = "offline"
	EventOnline                      = "online"
	EventOpen                        = "open"
	EventOrientationChange           = "orientationchange"
	EventPageHide                    = "pagehide"
	EventPageShow                    = "pageshow"
	EventPaste                       = "paste"
	EventPause                       = "pause"
	EventPointerCancel               = "pointercancel"
	EventPointerDown                 = "pointerdown"
	EventPointerEnter                = "pointerenter"
	EventPointerLeave                = "pointerleave"
	EventPointerLockChange           = "pointerlockchange"
	EventPointerLockError            = "pointerlockerror"
	EventPointerMove                 = "pointermove"
	EventPointerOut                  = "pointerout"
	EventPointerOver                 = "pointerover"
	EventPointerUp                   = "pointerup"
	EventPlay                        = "play"
	EventPlaying                     = "playing"
	EventPopState                    = "popstate"
	EventProgress                    = "progress"
	EventPush                        = "push"
	EventPushSubscriptionChange      = "pushsubscriptionchange"
	EventRateChange                  = "ratechange"
	EventReadyStateChange            = "readystatechange"
	EventRepeatEvent                 = "repeatEvent"
	EventReset                       = "reset"
	EventResize                      = "resize"
	EventResourceTimingBufferFull    = "resourcetimingbufferfull"
	EventResult                      = "result"
	EventResume                      = "resume"
	EventScroll                      = "scroll"
	EventSeeked                      = "seeked"
	EventSeeking                     = "seeking"
	EventSelect                      = "select"
	EventSelectStart                 = "selectstart"
	EventSelectionChange             = "selectionchange"
	EventShow                        = "show"
	EventSlotChange                  = "slotchange"
	EventSoundEnd                    = "soundend"
	EventSoundStart                  = "soundstart"
	EventSpeechEnd                   = "speechend"
	EventSpeechStart                 = "speechstart"
	EventStalled                     = "stalled"
	EventStart                       = "start"
	EventStorage                     = "storage"
	EventSubmit                      = "submit"
	EventSuccess                     = "success"
	EventSuspend                     = "suspend"
	EventSvgAbort                    = "SVGAbort"
	EventSvgError                    = "SVGError"
	EventSvgLoad                     = "SVGLoad"
	EventSvgResize                   = "SVGResize"
	EventSvgScroll                   = "SVGScroll"
	EventSvgUnload                   = "SVGUnload"
	EventSvgZoom                     = "SVGZoom"
	EventTimeout                     = "timeout"
	EventTimeUpdate                  = "timeupdate"
	EventTouchCancel                 = "touchcancel"
	EventTouchEnd                    = "touchend"
	EventTouchMove                   = "touchmove"
	EventTouchStart                  = "touchstart"
	EventTransitionEnd               = "transitionend"
	EventUnload                      = "unload"
	EventUpdateReady                 = "updateready"
	EventUserProximity               = "userproximity"
	EventVoicesChanged               = "voiceschanged"
	EventVisibilityChange            = "visibilitychange"
	EventVolumeChange                = "volumechange"
	EventWaiting                     = "waiting"
	EventWheel                       = "wheel"
)

Event* constants provide compile-time safety for HTML event names. Using these constants prevents typos and enables LSP autocompletion.

Variables ¶

This section is empty.

Functions ¶

func IfElse ¶

func IfElse[T any](condition bool, result, alternative T) T

IfElse returns the appropriate value based on a boolean condition.

This generic function is useful for inline conditional expressions in builder-style code where you need to choose between two values without breaking the chain of method calls.

Example:

div := Div(KV{"class": IfElse(isActive, "active", "inactive")})

Body(
	IfElse(isAdmin,
		Div("Admin content"),
		P("Regular user content"),
	),
)

func Render ¶

func Render(w io.Writer, node Node) error

Render writes the HTML representation of a Node to the provided io.Writer.

This is a convenience function that makes it suitable for writing directly to files, HTTP responses, or other output streams.

Example:

err := Render(os.Stdout, Div("Hello"))
// Outputs: <div>Hello</div>

Types ¶

type Element ¶

type Element struct {
	Tag        string      // HTML tag name
	IsVoid     bool        // Whether the tag is self-closing (e.g., <br>, <img>)
	Attributes []attribute // HTML attributes as key-value pairs
	Children   []Node      // Child nodes
}

Element represents an HTML element with its attributes and children.

func (Element) Render ¶

func (me Element) Render(w io.Writer) error

Render generates the HTML for the element and its children to the provided writer.

type KV ¶

type KV map[string]any

KV represents a key-value map for HTML attributes.

The value type must be either string or bool:

string: Attribute will have the format key="value" (HTML-escaped)
bool: If true, attribute appears as key (valueless). If false, attribute is omitted.
any other type triggers an error during rendering.

Example:

KV{"class": "container", "hidden": true, "disabled": false}
// Renders: class="container" hidden

type Node ¶

type Node interface {
	Render(io.Writer) error
}

Node represents any renderable HTML element or text content.

The Node interface is the core abstraction that allows both HTML elements and text content to be treated uniformly when building and rendering HTML trees. All elements created by the factory functions (Div(), P(), Svg(), etc.) implement this interface.

Example:

var node Node = Div("Hello")
err := node.Render(os.Stdout)

func A ¶

func A(args ...any) Node

A creates hyperlinks to other web pages, files, locations within the same page, or anything else a URL can address.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a

func Abbr ¶

func Abbr(args ...any) Node

Abbr represents an abbreviation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr

func Address ¶

func Address(args ...any) Node

Address indicates contact information for a person or organization.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address

func Area ¶

func Area(attrs ...KV) Node

Area defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hyperlink.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/area

func Article ¶

func Article(args ...any) Node

Article creates an article element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article

func Aside ¶

func Aside(args ...any) Node

Aside creates an aside element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside

func Audio ¶

func Audio(args ...any) Node

Audio is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio

func B ¶

func B(args ...any) Node

B draws attention to text without conveying importance.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b

func Base ¶

func Base(attrs ...KV) Node

Base specifies the base URL and default browsing context for relative URLs.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/base

func Bdi ¶

func Bdi(args ...any) Node

Bdi isolates text for bidirectional text formatting.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi

func Bdo ¶

func Bdo(args ...any) Node

Bdo overrides the current text direction.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo

func Blockquote ¶

func Blockquote(args ...any) Node

Blockquote represents a section quoted from another source.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote

func Body ¶

func Body(args ...any) Node

Body represents the content of an HTML document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body

func Br ¶

func Br(attrs ...KV) Node

Br produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/br

func Button ¶

func Button(args ...any) Node

Button is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button

func Canvas ¶

func Canvas(args ...any) Node

Canvas is a container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas

func Caption ¶

func Caption(args ...any) Node

Caption specifies the caption (or title) of a table.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption

func Cite ¶

func Cite(args ...any) Node

Cite marks the title of a creative work.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite

func Code ¶

func Code(args ...any) Node

Code displays its contents styled as computer code.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code

func Col ¶

func Col(attrs ...KV) Node

Col defines one or more columns in a column group represented by its implicit or explicit parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col

func Colgroup ¶

func Colgroup(args ...any) Node

Colgroup defines a group of columns within a table.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup

func Data ¶

func Data(args ...any) Node

Data links content with a machine-readable translation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data

func Datalist ¶

func Datalist(args ...any) Node

Datalist contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist

func Dd ¶

func Dd(args ...any) Node

Dd provides the description, definition, or value for the preceding term.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd

func Del ¶

func Del(args ...any) Node

Del represents a range of text that has been deleted from a document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del

func Details ¶

func Details(args ...any) Node

Details creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

func Dfn ¶

func Dfn(args ...any) Node

Dfn indicates the defining instance of a term.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn

func Dialog ¶

func Dialog(args ...any) Node

Dialog represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

func Div ¶

func Div(args ...any) Node

Div is the generic container for flow content.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

func Dl ¶

func Dl(args ...any) Node

Dl represents a description list.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl

func DoctypeHtml ¶

func DoctypeHtml() Node

DoctypeHtml creates the <!DOCTYPE html> element.

https://developer.mozilla.org/en-US/docs/Glossary/Doctype

func Dt ¶

func Dt(args ...any) Node

Dt specifies a term in a description or definition list.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt

func Em ¶

func Em(args ...any) Node

Em marks text with emphasis.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em

func Embed ¶

func Embed(attrs ...KV) Node

Embed embeds external content at the specified point in the document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed

func Empty ¶

func Empty(args ...any) Node

Empty creates an empty element (no tag).

func Fencedframe ¶

func Fencedframe(args ...any) Node

Fencedframe represents a nested browsing context, like <iframe> but with more native privacy features built in.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fencedframe

func Fieldset ¶

func Fieldset(args ...any) Node

Fieldset is used to group several controls as well as labels (<label>) within a web form.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset

func Figcaption ¶

func Figcaption(args ...any) Node

Figcaption represents a caption or legend for the contents of its parent figure element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption

func Figure ¶

func Figure(args ...any) Node

Figure represents self-contained content with an optional caption.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure

func Footer(args ...any) Node

Footer creates a footer element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer

func Form ¶

func Form(args ...any) Node

Form represents a document section containing interactive controls for submitting information.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form

func H1 ¶

func H1(args ...any) Node

H1 creates a level 1 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h1

func H2 ¶

func H2(args ...any) Node

H2 creates a level 2 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h2

func H3 ¶

func H3(args ...any) Node

H3 creates a level 3 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h3

func H4 ¶

func H4(args ...any) Node

H4 creates a level 4 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h4

func H5 ¶

func H5(args ...any) Node

H5 creates a level 5 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h5

func H6 ¶

func H6(args ...any) Node

H6 creates a level 6 heading element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h6

func Head ¶

func Head(args ...any) Node

Head contains machine-readable information about the document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head

func Header(args ...any) Node

Header creates a header element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header

func Hgroup ¶

func Hgroup(args ...any) Node

Hgroup groups a set of h1–h6 elements when they represent a multi-level heading.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hgroup

func Hr ¶

func Hr(attrs ...KV) Node

Hr represents a thematic break between paragraph-level elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr

func Html ¶

func Html(args ...any) Node

Html creates the root element of an HTML document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/html

func I ¶

func I(args ...any) Node

I represents text in an alternate voice or mood.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i

func If ¶

func If(condition bool, result Node) Node

Conditionally returns a Node based on a boolean condition.

This function returns an empty Node (not nil) when the condition is false, which prevents nil pointer issues when building DOM trees.

Example:

Body(
	If(showHeader, Header(...)),
	Main(...),
)

func Iframe ¶

func Iframe(args ...any) Node

Iframe represents a nested browsing context, embedding another HTML page into the current one.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe

func Img ¶

func Img(attrs ...KV) Node

Img embeds an image into the document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img

func Input ¶

func Input(attrs ...KV) Node

Input is used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

func Ins ¶

func Ins(args ...any) Node

Ins represents a range of text that has been added to a document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins

func Kbd ¶

func Kbd(args ...any) Node

Kbd represents text that the user should enter.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd

func Label ¶

func Label(args ...any) Node

Label represents a caption for an item in a user interface.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label

func Legend ¶

func Legend(args ...any) Node

Legend represents a caption for the content of its parent <fieldset>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend

func Li ¶

func Li(args ...any) Node

Li represents a list item.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li

func Link ¶

func Link(attrs ...KV) Node

Link specifies relationships between the current document and an external resource.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link

func Main ¶

func Main(args ...any) Node

Main creates a main content element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main

func Map ¶

func Map(args ...any) Node

Map is used with <area> elements to define an image map (a clickable link area).

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map

func MapSlice ¶

func MapSlice[T any](input []T, f func(T) Node) Node

MapSlice transforms a slice of items into Nodes by applying a function to each element.

Each element in the input slice is transformed using the provided function, and all resulting Nodes are aggregated into a single container Node.

Example:

items := []string{"Apple", "Banana", "Cherry"}
Ul(
	MapSlice(items, func(item string) Node {
		return Li(item)
	}),
)

func Mark ¶

func Mark(args ...any) Node

Mark highlights text for reference.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark

func Math ¶

func Math(args ...any) Node

Math is the top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition, you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/math

func Menu(args ...any) Node

Menu represents a set of commands or options.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu

func Meta ¶

func Meta(attrs ...KV) Node

Meta represents metadata that cannot be represented by other HTML meta-related elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta

func Meter ¶

func Meter(args ...any) Node

Meter represents either a scalar value within a known range or a fractional value.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter

func Nav ¶

func Nav(args ...any) Node

Nav creates a navigation element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav

func Noscript ¶

func Noscript(args ...any) Node

Noscript defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript

func Object ¶

func Object(args ...any) Node

Object represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object

func Ol ¶

func Ol(args ...any) Node

Ol represents an ordered list.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol

func Optgroup ¶

func Optgroup(args ...any) Node

Optgroup creates a grouping of options within a <select> element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup

func Option ¶

func Option(args ...any) Node

Option is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option

func Output ¶

func Output(args ...any) Node

Output is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output

func P ¶

func P(args ...any) Node

P creates a paragraph element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p

func Picture ¶

func Picture(args ...any) Node

Picture defines multiple sources for an img element to offer alternative versions of an image for different display/device scenarios.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture

func Pre ¶

func Pre(args ...any) Node

Pre represents preformatted text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre

func Progress ¶

func Progress(args ...any) Node

Progress displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress

func Q ¶

func Q(args ...any) Node

Q indicates a short inline quotation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q

func Repeat ¶

func Repeat(n int, f func() Node) Node

Repeat generates multiple Nodes by calling a function n times.

The provided function is called exactly n times, and each resulting Node is aggregated into a single container Node. Using a function ensures each Node instance is unique (important for elements with mutable state).

Example:

Ul(
	Repeat(5, func() Node {
		return Li("List item")
	}),
)

func Rp ¶

func Rp(args ...any) Node

Rp provides parentheses for browsers that don't support ruby text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rp

func Rt ¶

func Rt(args ...any) Node

Rt specifies the ruby text for ruby annotations.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt

func Ruby ¶

func Ruby(args ...any) Node

Ruby represents ruby annotations for East Asian typography.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby

func S ¶

func S(args ...any) Node

S renders text with a strikethrough.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/s

func Samp ¶

func Samp(args ...any) Node

Samp represents sample output from a computer program.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp

func Script ¶

func Script(args ...any) Node

Script is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script

func Search ¶

func Search(args ...any) Node

Search represents a search or filtering interface.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search

func Section ¶

func Section(args ...any) Node

Section creates a section element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section

func Select ¶

func Select(args ...any) Node

Select represents a control that provides a menu of options.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

func Selectedcontent ¶

func Selectedcontent(args ...any) Node

Selectedcontent displays the content of the currently selected <option> inside a closed <select> element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent

func Slot ¶

func Slot(args ...any) Node

Slot acts as a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot

func Small ¶

func Small(args ...any) Node

Small represents side-comments and small print.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/small

func Source ¶

func Source(attrs ...KV) Node

Source specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source

func Span ¶

func Span(args ...any) Node

Span is the generic inline container for phrasing content.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span

func Strong ¶

func Strong(args ...any) Node

Strong indicates strong importance.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong

func Style ¶

func Style(args ...any) Node

Style contains style information for a document or part of a document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style

func Sub ¶

func Sub(args ...any) Node

Sub specifies inline text displayed as subscript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub

func Summary ¶

func Summary(args ...any) Node

Summary specifies a summary, caption, or legend for a details element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary

func Sup ¶

func Sup(args ...any) Node

Sup specifies inline text displayed as superscript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup

func Svg ¶

func Svg(args ...any) Node

Svg is a container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg

func Table ¶

func Table(args ...any) Node

Table represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table

func Tbody ¶

func Tbody(args ...any) Node

Tbody groups the body content in a table with information about the table's columns. This is usually in the form of column headers (<th> elements).

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody

func Td ¶

func Td(args ...any) Node

Td is a child of the <tr> element, it defines a cell of a table that contains data.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td

func Template ¶

func Template(args ...any) Node

Template holds HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template

func Textarea ¶

func Textarea(args ...any) Node

Textarea represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea

func Tfoot ¶

func Tfoot(args ...any) Node

Tfoot groups the footer content in a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot

func Th ¶

func Th(args ...any) Node

Th is a child of the <tr> element, it defines a cell as the header of a group of table cells. The nature of this group can be explicitly defined by the scope and headers attributes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th

func Thead ¶

func Thead(args ...any) Node

Thead groups the header content in a table with information about the table's columns. This is usually in the form of column headers (<th> elements).

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead

func Time ¶

func Time(args ...any) Node

Time represents a specific period in time.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time

func Title ¶

func Title(args ...any) Node

Title defines the document's title that is shown in a browser's title bar or a page's tab.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title

func Tr ¶

func Tr(args ...any) Node

Tr defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr

func Track ¶

func Track(attrs ...KV) Node

Track is used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track

func U ¶

func U(args ...any) Node

U represents text with an unarticulated annotation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/u

func Ul ¶

func Ul(args ...any) Node

Ul represents an unordered list.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul

func Var ¶

func Var(args ...any) Node

Var represents a variable in a mathematical expression or programming context.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var

func Video ¶

func Video(args ...any) Node

Video embeds a media player which supports video playback into the document. You can also use <video> for audio content, but the audio element may provide a more appropriate user experience.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video

func Wbr ¶

func Wbr(attrs ...KV) Node

Wbr represents a word break opportunity.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr

type RawText ¶

type RawText string

RawText represents a text node that renders its content exactly as provided, without any HTML escaping.

func (RawText) Render ¶

func (me RawText) Render(w io.Writer) error

type Text ¶

type Text string

Text represents a plain text node that renders HTML-escaped content. Unlike HTML elements, Text nodes are not wrapped in tags and are rendered as literal text content with HTML entities automatically escaped.

func (Text) Render ¶

func (me Text) Render(w io.Writer) error

Source Files ¶

View all Source files

Directories ¶

Path	Synopsis
examples
login_form command
simple_page command
h_vs_templ templ: version: v0.3.977	templ: version: v0.3.977
htmx

?	: This menu
/	: Search site
f or F	: Jump to
y or Y	: Canonical URL

README ¶

hyper

Features

Installation

Quick Start

Usage

Basic Elements

Attributes

Conditional Rendering

Lists and Iteration

With Tailwind CSS

With HTMX

Complete Example

Documentation ¶

Index ¶

Constants ¶

Variables ¶

Functions ¶

func IfElse ¶

func Render ¶

Types ¶

type Element ¶

func (Element) Render ¶

type KV ¶

type Node ¶

func A ¶

func Abbr ¶

func Address ¶

func Area ¶

func Article ¶

func Aside ¶

func Audio ¶

func B ¶

func Base ¶

func Bdi ¶

func Bdo ¶

func Blockquote ¶

func Body ¶

func Br ¶

func Button ¶

func Canvas ¶

func Caption ¶

func Cite ¶

func Code ¶

func Col ¶

func Colgroup ¶

func Data ¶

func Datalist ¶

func Dd ¶

func Del ¶

func Details ¶

func Dfn ¶

func Dialog ¶

func Div ¶

func Dl ¶

func DoctypeHtml ¶

func Dt ¶

func Em ¶

func Embed ¶

func Empty ¶

func Fencedframe ¶

func Fieldset ¶

func Figcaption ¶

func Figure ¶

func Footer ¶

func Form ¶

func H1 ¶

func H2 ¶

func H3 ¶

func H4 ¶

func H5 ¶

func H6 ¶

func Head ¶

func Header ¶

func Hgroup ¶

func Hr ¶

func Html ¶

func I ¶

func If ¶

func Iframe ¶