140+ Elements

Tag Builders

Every HTML and SVG element is available globally after importing Nuclo. Build your UI with plain function calls — no JSX required.

Overview

Tag builders accept children, attributes, event modifiers, and arrays. After import 'nuclo', all builders are available globally.

typescript

HTML Tags

Full HTML5 coverage with 140+ elements:

Document Structure

html, head, body, header, footer, main, section, article, aside, nav

Content Sectioning

h1, h2, h3, h4, h5, h6, div, span, p, blockquote, pre, code

Lists

ul, ol, li, dl, dt, dd

Forms

form, input, textarea, button, select, option, label, fieldset, legend

Tables

table, thead, tbody, tfoot, tr, th, td, caption, col, colgroup

Media

img, video, audio, source, track, canvas, svg

Interactive

a, button, details, summary, dialog

Text Formatting

strong, em, mark, small, del, ins, sub, sup, abbr, cite, q, kbd, samp, var

And 100+ more—see the full registry.

SVG Tags

Full SVG support for graphics and icons:

text

SVG Example

typescript

Attributes

Pass attributes as objects—values can be static or dynamic functions.

Static Attributes

typescript

Dynamic Attributes

Use functions for values that should be re-evaluated on update():

typescript

Style Objects

Styles can be objects, strings, or dynamic functions:

typescript

Boolean Attributes

typescript

Special Attributes

Some attributes are mapped for convenience:

typescript

className Merging

Multiple className values are merged rather than overwritten—static strings, dynamic functions, and style helper modifiers all compose.

typescript

Conditional Classes

typescript

With Style Helpers

typescript

Status Pattern

Common pattern for conditional styling:

typescript

Modifiers

Objects with __modifier allow behaviors beyond attributes.

Event Modifiers

typescript

Style Modifiers

typescript

Custom Modifiers

Create your own modifiers for reusable behaviors:

typescript

ℹ Note

Custom modifiers are perfect for abstracting focus rings, tooltip bindings, drag-and-drop, and other reusable DOM behaviors.

Next Steps

Core API

update(), render(), on(), list(), and when() in depth.

Styling

CSS-in-JS system, style queries, and responsive design.

Pitfalls

Five patterns to avoid when building with Nuclo.

Examples

See tag builders used in real interactive demos.