Component Reference#

Html(
  attributes: {'lang': 'en'},
  children: [
    Head(children: [/* meta, links */]),
    Body(children: [/* content */]),
  ],
)

Head(children: [
  Meta(charset: 'utf-8'),
  Meta(name: 'viewport', content: 'width=device-width, initial-scale=1'),
  HtmlLink(href: '/styles.css', rel: 'stylesheet'),
  Script(src: '/app.js', defer: true),
])

Body(
  className: 'bg-gray-50 text-gray-900',
  children: [/* page content */],
)

Meta(charset: 'utf-8')
Meta(name: 'description', content: 'My awesome app')
Meta(name: 'viewport', content: 'width=device-width, initial-scale=1')
Meta(httpEquiv: 'X-UA-Compatible', content: 'IE=edge')

HtmlLink(href: '/styles.css', rel: 'stylesheet')
HtmlLink(href: '/favicon.ico', rel: 'icon')
HtmlLink(href: '/font.woff2', rel: 'preload', as: 'font', type: 'font/woff2')

Div(
  className: 'container',
  child: Text('Content'),
)

P(child: Text('This is a paragraph.'))

Ul(
  className: 'list-disc',
  children: [
    Li(child: Text('Item 1')),
    Li(child: Text('Item 2')),
  ],
)

Ol(
  className: 'list-decimal',
  children: [
    Li(child: Text('First')),
    Li(child: Text('Second')),
  ],
)

Dl(children: [
  Dt(child: Text('Term')),
  Dd(child: Text('Definition')),
])

Blockquote(
  className: 'border-l-4 pl-4 italic',
  child: Text('A wise quote...'),
)

Pre(child: Code(child: Text('const x = 1;')))

Hr(className: 'my-4 border-gray-300')

A(
  href: 'https://duxt.dev',
  target: '_blank',
  child: Text('Visit Duxt'),
)

Span(className: 'text-red-500', child: Text('Highlighted'))

Strong(child: Text('Important'))
B(child: Text('Bold'))

Em(child: Text('Emphasized'))
I(child: Text('Italic'))

U(child: Text('Underlined'))
S(child: Text('Strikethrough'))

Small(child: Text('Fine print'))

Code(className: 'bg-gray-100 px-1 rounded', child: Text('const'))

P(children: [
  Text('Line one'),
  Br(),
  Text('Line two'),
])

H1(child: Text('Main Title'))
H2(child: Text('Section'))
H3(child: Text('Subsection'))
H4(child: Text('Sub-subsection'))
H5(child: Text('Minor heading'))
H6(child: Text('Smallest heading'))

Form(
  method: FormMethod.post,
  action: '/api/submit',
  children: [...],
)

Input(
  type: 'email',
  name: 'email',
  placeholder: 'Enter email',
  onInput: (value) => print(value),
)

Input(
  type: 'checkbox',
  name: 'agree',
  checked: true,
)

Button(
  type: 'submit',
  onClick: () => handleSubmit(),
  child: Text('Submit'),
)

Select(
  name: 'country',
  onChange: (values) => print(values),
  children: [
    Optgroup(
      label: 'North America',
      children: [
        Option(value: 'us', child: Text('United States')),
        Option(value: 'ca', child: Text('Canada')),
      ],
    ),
    Optgroup(
      label: 'Europe',
      children: [
        Option(value: 'uk', child: Text('United Kingdom')),
        Option(value: 'de', child: Text('Germany')),
      ],
    ),
  ],
)

Textarea(
  name: 'message',
  rows: 4,
  placeholder: 'Enter message...',
)

Label(
  htmlFor: 'email',
  child: Text('Email Address'),
)

Fieldset(
  children: [
    Legend(child: Text('Personal Info')),
    Input(type: 'text', name: 'name'),
    Input(type: 'email', name: 'email'),
  ],
)

Progress(value: 0.7, max: 1)
Meter(value: 0.6, min: 0, max: 1, low: 0.3, high: 0.8)

Table(
  className: 'w-full',
  children: [
    Caption(child: Text('Data Table')),
    Thead(child: Tr(children: [
      Th(child: Text('Name')),
      Th(child: Text('Email')),
    ])),
    Tbody(children: [
      Tr(children: [
        Td(child: Text('Alice')),
        Td(child: Text('[email protected]')),
      ]),
    ]),
    Tfoot(child: Tr(children: [
      Td(colspan: 2, child: Text('Total: 1')),
    ])),
  ],
)

Colgroup(children: [
  Col(className: 'bg-gray-100'),
  Col(),
  Col(className: 'bg-gray-100'),
])

Img(
  src: '/images/photo.jpg',
  alt: 'A photo',
  width: 400,
  height: 300,
  loading: MediaLoading.lazy,
)

Video(
  src: '/video.mp4',
  controls: true,
  width: 640,
  height: 360,
)

Audio(
  src: '/audio.mp3',
  controls: true,
)

Video(
  controls: true,
  children: [
    Source(src: '/video.webm', type: 'video/webm'),
    Source(src: '/video.mp4', type: 'video/mp4'),
  ],
)

Iframe(
  src: 'https://www.youtube.com/embed/xyz',
  width: 560,
  height: 315,
  allow: 'accelerometer; autoplay; encrypted-media',
)

ObjectEmbed(
  data: '/document.pdf',
  type: 'application/pdf',
  width: 600,
  height: 400,
)

Script(src: '/app.js', defer: true)
Script(content: 'console.log("hello")')

Figure(children: [
  Img(src: '/photo.jpg', alt: 'Photo'),
  Figcaption(child: Text('Photo caption')),
])

Header(child: Nav(children: [/* links */]))
Main(child: Article(children: [/* content */]))
Aside(child: Section(children: [/* sidebar */]))
Footer(child: Text('© 2024'))

Details(
  open: true,
  children: [
    Summary(child: Text('Click to expand')),
    P(child: Text('Hidden content')),
  ],
)

Dialog(
  open: isOpen,
  children: [
    H2(child: Text('Dialog Title')),
    P(child: Text('Dialog content')),
    Button(onClick: close, child: Text('Close')),
  ],
)

Svg(
  viewBox: '0 0 100 100',
  width: 100.px,
  height: 100.px,
  children: [/* shapes */],
)

// Rectangle
Rect(x: '10', y: '10', width: '80', height: '40', fill: Color.hex(0x3B82F6), rx: '4')

// Circle
Circle(cx: '50', cy: '50', r: '30', fill: Color.hex(0x10B981))

// Ellipse
Ellipse(cx: '50', cy: '50', rx: '40', ry: '25', fill: Color.hex(0xF59E0B))

// Line
Line(x1: '10', y1: '10', x2: '90', y2: '90', stroke: Color.hex(0xEF4444), strokeWidth: '2')

// Path
Path(d: 'M10 10 L90 90 L10 90 Z', fill: Color.hex(0x8B5CF6))

// Polygon
Polygon(points: '50,10 90,90 10,90', fill: Color.hex(0xEC4899))

// Polyline
Polyline(points: '10,80 30,20 50,60 70,30 90,70', stroke: Color.hex(0x06B6D4), fill: Color.transparent)

// Abbreviation with title
Abbr(title: 'HyperText Markup Language', child: Text('HTML'))

// Highlighted text
Mark(child: Text('important'))

// Subscript/superscript
P(children: [Text('H'), Sub(child: Text('2')), Text('O')])
P(children: [Text('x'), Sup(child: Text('2'))])

// Date/time with machine-readable value
Time(dateTime: '2026-02-09', child: Text('February 9'))

// Keyboard input
P(children: [Text('Press '), Kbd(child: Text('Ctrl+C')), Text(' to copy')])

// Deleted/inserted text (diffs)
P(children: [
  Del(child: Text('old text')),
  Ins(child: Text('new text')),
])

// Inline quotation
Q(cite: 'https://example.com', child: Text('To be or not to be'))

// Responsive images
Picture(children: [
  Source(src: '/photo.webp', type: 'image/webp'),
  Source(src: '/photo.avif', type: 'image/avif'),
  Img(src: '/photo.jpg', alt: 'Fallback'),
])

// Canvas for drawing
Canvas(id: 'myCanvas', width: 400, height: 300)

// Video with subtitles
Video(src: '/movie.mp4', controls: true, children: [
  Track(src: '/subs-en.vtt', kind: 'subtitles', srclang: 'en', label: 'English', isDefault: true),
  Track(src: '/subs-es.vtt', kind: 'subtitles', srclang: 'es', label: 'Spanish'),
])

// Document head elements
Head(children: [
  Title(child: Text('My Page')),
  Meta(charset: 'utf-8'),
  StyleElement(content: 'body { margin: 0; }'),
  Base(href: '/app/'),
])

// No-JavaScript fallback
Noscript(child: P(child: Text('This app requires JavaScript.')))

// Contact info
Address(child: A(href: 'mailto:[email protected]', child: Text('[email protected]')))

// Heading with subtitle
Hgroup(children: [
  H1(child: Text('Duxt HTML')),
  P(child: Text('Complete HTML5 components for Jaspr')),
])

// Search form
Search(child: Form(children: [
  Input(type: 'search', name: 'q', placeholder: 'Search...'),
  Button(type: 'submit', child: Text('Go')),
]))

Output(htmlFor: 'range', name: 'result', child: Text('50'))

HtmlTemplate(id: 'card-template', children: [
  Div(className: 'card', children: [
    Slot(name: 'title'),
    Slot(name: 'content'),
  ]),
])

Text('Hello, World!')
Text('With key', key: Key('text-1'))

Raw('<strong>Bold</strong> text')

Fragment([
  H1(child: Text('Title')),
  P(child: Text('Paragraph')),
])