Element Functions

Every HTML element is a typed function.

Signature

function div(props?: CommonProps | Child, ...children: Child[]): WhisqNode
function span(props?: CommonProps | Child, ...children: Child[]): WhisqNode
function button(props?: ButtonProps | Child, ...children: Child[]): WhisqNode
function input(props?: InputProps): WhisqNode
// ... and 30+ more

Two Call Signatures

// With props + children
div({ class: "card", id: "main" }, h1("Title"), p("Content"))

// Without props — just children
div(h1("Title"), p("Content"))

// Single text child
h1("Hello Whisq")

Available Elements

Layout: div, span, main, section, article, aside, header, footer, nav Text: h1–h6, p, strong, em, small, pre, code Interactive: button, a Forms: form, input, textarea, select, option, label Lists: ul, ol, li Table: table, thead, tbody, tr, th, td Media: img, video, audio Misc: br, hr, iframe

Reactive Props

div({ class: () => active.value ? "on" : "off" })
div({ style: () => `color: ${color.value}` })
div({ hidden: () => !visible.value })

Events

button({ onclick: () => count.value++ }, "Click")
input({ oninput: (e) => name.value = e.target.value })