![\"Logo\"](\"/logo.png\"){kind=logo}
\n\n$input({ type: 'text', placeholder: 'Search...', className: 'search-input' })\n// \n\n$meta({ charset: 'UTF-8' })\n// \n```\n\n## Components\n\nSince every element factory is just a function that returns a string, building reusable components works exactly like React — define a function that accepts props and returns markup. No framework, no class hierarchy, no registration step.\n\n### Defining Components\n\n```typescript\nimport { $div, $h2, $p, $img, TElementProps, CSSProperties } from '@onivoro/server-html';\n\n// A component is just a function — same mental model as a React functional component\ninterface CardProps {\n title: string;\n body: string;\n imageUrl?: string;\n}\n\nfunction Card({ title, body, imageUrl }: CardProps): string {\n return $div({\n className: 'card',\n style: cardStyle,\n children: [\n imageUrl ? $img({ src: imageUrl, alt: title, style: { width: '100%' } }) : '',\n $h2({ textContent: title }),\n $p({ textContent: body }),\n ]\n });\n}\n\nconst cardStyle: CSSProperties = {\n border: '1px solid #e0e0e0',\n borderRadius: '8px',\n padding: '1rem',\n maxWidth: '320px',\n};\n```\n\n### Composing Components\n\nComponents compose exactly like React — call them inside `children` arrays:\n\n```typescript\nimport { $div, $h1 } from '@onivoro/server-html';\n\nfunction CardGrid(cards: CardProps[]): string {\n return $div({\n children: [\n $h1({ textContent: 'Featured' }),\n $div({\n style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' },\n children: cards.map(card => Card(card)),\n }),\n ]\n });\n}\n\n// Usage\nconst html = CardGrid([\n { title: 'First', body: 'Hello world' },\n { title: 'Second', body: 'Another card', imageUrl: '/img/photo.jpg' },\n]);\n```\n\n### Components with Children\n\nAccept `children` as a prop to create layout components — the same pattern as `props.children` in React:\n\n```typescript\nimport { $div, $header, $main, $footer, $h1, CSSProperties } from '@onivoro/server-html';\n\nfunction PageLayout({ title, children }: { title: string; children: string[] }): string {\n return $div({\n children: [\n $header({ children: [$h1({ textContent: title })] }),\n $main({ style: mainStyle, children }),\n $footer({ textContent: `© ${new Date().getFullYear()}` }),\n ]\n });\n}\n\nconst mainStyle: CSSProperties = { padding: '2rem', maxWidth: '960px', margin: '0 auto' };\n```\n\n## Styles and Scripts as Variables\n\nStyles and scripts are just strings and objects — assign them to variables, share them across components, compose them. No special API needed.\n\n### Shared Styles\n\n```typescript\nimport { CSSProperties } from '@onivoro/server-html';\n\n// Define once, reference everywhere — like a theme object in React\nconst theme = {\n primary: { backgroundColor: '#1976d2', color: '#fff' } as CSSProperties,\n surface: { backgroundColor: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' } as CSSProperties,\n text: { fontFamily: 'system-ui, sans-serif', lineHeight: '1.6' } as CSSProperties,\n};\n\n// Compose styles with spread — like sx prop merging in MUI\nconst heroStyle: CSSProperties = { ...theme.primary, padding: '4rem 2rem', textAlign: 'center' };\n```\n\n### Inline Scripts\n\n```typescript\nimport { $script, $style } from '@onivoro/server-html';\n\n// Scripts are just strings — define them as constants alongside the components that use them\nconst analyticsScript = `\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'GA_MEASUREMENT_ID');\n`;\n\nconst globalStyles = `\n * { box-sizing: border-box; margin: 0; }\n body { font-family: system-ui, sans-serif; }\n .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }\n`;\n\n// Then inject them into the page\n$script({ textContent: analyticsScript });\n$style({ textContent: globalStyles });\n```\n\n### Putting It Together\n\n```typescript\nimport { $html, $head, $meta, $title, $style, $script, $body, $div, $h1 } from '@onivoro/server-html';\n\nfunction renderPage(pageTitle: string, content: string[]): string {\n return $html({\n lang: 'en',\n children: [\n $head({\n children: [\n $meta({ charset: 'UTF-8' }),\n $meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),\n $title({ textContent: pageTitle }),\n $style({ textContent: globalStyles }),\n ]\n }),\n $body({\n children: [\n $div({ className: 'container', children: content }),\n $script({ textContent: analyticsScript }),\n ]\n })\n ]\n });\n}\n```\n\n## Dynamic Content\n\n```typescript\nimport { $ul, $li, $table, $thead, $tbody, $tr, $th, $td } from '@onivoro/server-html';\n\n// Lists — same as items.map() in React JSX\nconst items = ['Apple', 'Banana', 'Orange'];\nconst list = $ul({\n children: items.map(textContent => $li({ textContent }))\n});\n\n// Tables from data\ninterface User { name: string; email: string; role: string }\nfunction UserTable(users: User[]): string {\n return $table({\n children: [\n $thead({ children: [$tr({ children: [\n $th({ textContent: 'Name' }),\n $th({ textContent: 'Email' }),\n $th({ textContent: 'Role' }),\n ]})] }),\n $tbody({ children: users.map(u => $tr({ children: [\n $td({ textContent: u.name }),\n $td({ textContent: u.email }),\n $td({ textContent: u.role }),\n ]})) }),\n ]\n });\n}\n```\n\n## Server-Rendered Pages with Client Interactivity\n\nThe props interface accepts arbitrary attributes, making it natural to pair with lightweight client frameworks like Alpine.js. Server-render the structure, let the client handle behavior:\n\n```typescript\nimport { $div, $button, $input, $ul } from '@onivoro/server-html';\n\nconst searchPage = $div({\n 'x-data': '{ query: \"\", results: [] }',\n children: [\n $input({\n type: 'text',\n 'x-model': 'query',\n '@input.debounce.300ms': 'search()',\n placeholder: 'Search...'\n }),\n $ul({\n 'x-html': 'resultsHtml'\n }),\n $button({\n '@click': 'clearResults()',\n 'x-show': 'results.length > 0',\n textContent: 'Clear'\n })\n ]\n});\n```\n\nNo template literals, no string concatenation, no forgetting to escape an attribute value. The same pattern works with HTMX, Stimulus, or any attribute-driven framework.\n\n## Custom Element Factories\n\nUse `asElementFactory` to create factories for custom elements or web components:\n\n```typescript\nimport { asElementFactory } from '@onivoro/server-html';\n\n// Provide a renderer function: (content: ArrayContent
'] });\n```\n\n## Available Elements\n\nAll HTML5 tags are available as `$`-prefixed exports:\n\n`$a`, `$abbr`, `$address`, `$area`, `$article`, `$aside`, `$audio`, `$b`, `$base`, `$bdi`, `$bdo`, `$blockquote`, `$body`, `$br`, `$button`, `$canvas`, `$caption`, `$cite`, `$code`, `$col`, `$colgroup`, `$data`, `$datalist`, `$dd`, `$del`, `$details`, `$dfn`, `$dialog`, `$div`, `$dl`, `$dt`, `$em`, `$embed`, `$fieldset`, `$figcaption`, `$figure`, `$footer`, `$form`, `$h1`–`$h6`, `$head`, `$header`, `$hgroup`, `$hr`, `$html`, `$i`, `$iframe`, `$img`, `$input`, `$ins`, `$kbd`, `$label`, `$legend`, `$li`, `$link`, `$main`, `$map`, `$mark`, `$math`, `$menu`, `$meta`, `$meter`, `$nav`, `$noscript`, `$object`, `$ol`, `$optgroup`, `$option`, `$output`, `$p`, `$picture`, `$pre`, `$progress`, `$q`, `$rp`, `$rt`, `$ruby`, `$s`, `$samp`, `$script`, `$section`, `$select`, `$slot`, `$small`, `$source`, `$span`, `$strong`, `$style`, `$sub`, `$summary`, `$sup`, `$table`, `$tbody`, `$td`, `$template`, `$textarea`, `$tfoot`, `$th`, `$thead`, `$time`, `$title`, `$tr`, `$track`, `$u`, `$ul`, `$var`, `$video`, `$wbr`\n\nAlso exported: `CSSProperties`, `TElementProps`, `asElementFactory`.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}