duxt_html #

Flutter-style HTML components for Jaspr.

Overview #

duxt_html provides a familiar Flutter-like syntax for building HTML components in Jaspr. Instead of lowercase function calls, you get PascalCase components with named parameters.

Installation #

Add to your pubspec.yaml:

dependencies:
  duxt_html: ^0.1.0

Usage #

Before (Jaspr) #

import 'package:jaspr/dom.dart';

div(classes: 'flex gap-4', [
  img(src: '/logo.png', alt: 'Logo'),
  a(href: '/about', [text('About')]),
])

After (duxt_html) #

import 'package:duxt_html/duxt_html.dart';

Div(
  className: 'flex gap-4',
  children: [
    Img(src: '/logo.png', alt: 'Logo'),
    A(href: '/about', child: Text('About')),
  ],
)

Features #

• PascalCase components - Div, Span, Button instead of div, span, button
• Flutter-like child pattern - Use child for single child, children for multiple
• className prop - Use className instead of classes
• CSS string styles - Pass CSS as a string: style: 'color: red; font-size: 16px'
• Full Jaspr compatibility - All components return Jaspr Component types

Available Components #

Content Elements #

Div, P, Ul, Ol, Li, Dl, Dt, Dd, Blockquote, Pre, Hr

Text Elements #

A, B, Br, Code, Em, I, S, Small, Span, Strong, U, Wbr

Headings #

H1, H2, H3, H4, H5, H6

Form Elements #

Form, Input, Button, Select, Option, Textarea, Label, Fieldset, Legend, Datalist, Meter, Progress, Optgroup

Table Elements #

Table, Tr, Td, Th, Thead, Tbody, Tfoot, Caption, Col, Colgroup

Media Elements #

Img, Video, Audio, Source, Iframe, Embed, Figure, Figcaption

Semantic Elements #

Header, Footer, Nav, Main, Article, Aside, Section, Details, Summary, Dialog

SVG Elements #

Svg, Rect, Circle, Ellipse, Line, Path, Polygon, Polyline

Helpers #

Text, Raw, Fragment

Examples #

Basic Layout #

Div(
  className: 'container mx-auto p-4',
  children: [
    Header(
      className: 'flex justify-between items-center',
      children: [
        H1(child: Text('My App')),
        Nav(children: [
          A(href: '/', child: Text('Home')),
          A(href: '/about', child: Text('About')),
        ]),
      ],
    ),
    Main(
      child: Article(
        children: [
          H2(child: Text('Welcome')),
          P(child: Text('This is a paragraph.')),
        ],
      ),
    ),
  ],
)

Form #

Form(
  method: FormMethod.post,
  children: [
    Label(
      htmlFor: 'email',
      child: Text('Email'),
    ),
    Input(
      type: 'email',
      name: 'email',
      id: 'email',
      placeholder: 'Enter your email',
      onInput: (value) => print('Email: $value'),
    ),
    Button(
      type: 'submit',
      className: 'btn btn-primary',
      child: Text('Subscribe'),
    ),
  ],
)

Table #

Table(
  className: 'table-auto',
  children: [
    Thead(
      child: Tr(children: [
        Th(child: Text('Name')),
        Th(child: Text('Age')),
      ]),
    ),
    Tbody(children: [
      Tr(children: [
        Td(child: Text('Alice')),
        Td(child: Text('30')),
      ]),
      Tr(children: [
        Td(child: Text('Bob')),
        Td(child: Text('25')),
      ]),
    ]),
  ],
)

SVG #

Svg(
  viewBox: '0 0 100 100',
  width: 100.px,
  height: 100.px,
  children: [
    Circle(cx: '50', cy: '50', r: '40', fill: Color.hex(0x3B82F6)),
    Rect(x: '25', y: '40', width: '50', height: '20', fill: Color.hex(0xFFFFFF)),
  ],
)

API Reference #

Common Parameters #

All components support these parameters:

Note: You cannot use both child and children on the same component.

License #

MIT License - see LICENSE file for details.