tessl/maven-org-jetbrains-compose-html--core

Compose Web HTML library for building reactive web user interfaces using Kotlin with type-safe HTML DSL, CSS styling, and event handling

—

Pending

Overview

Eval results

Files

HTML Elements

Name: tessl/maven-org-jetbrains-compose-html--core
Author: tessl

Complete HTML element support for building web user interfaces with type-safe Kotlin DSL. All elements support attributes, styling, and event handling through consistent builder patterns.

Capabilities

Text Content

Core text rendering and container elements.

/**
 * Render text content directly in the DOM
 * @param value The text content to display
 */
fun Text(value: String)

Container Elements

Generic container elements for layout and organization.

/**
 * Division container element for grouping content
 * @param attrs Attribute builder for HTMLDivElement
 * @param content Composable content builder
 */
fun Div(
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
    content: ContentBuilder<HTMLDivElement>? = null
)

/**
 * Inline span container for text styling
 * @param attrs Attribute builder for HTMLSpanElement
 * @param content Composable content builder
 */
fun Span(
    attrs: AttrBuilderContext<HTMLSpanElement>? = null,
    content: ContentBuilder<HTMLSpanElement>? = null
)

Document Structure Elements

Semantic elements for document structure and organization.

/**
 * Header section of a document or section
 */
fun Header(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Footer section of a document or section
 */
fun Footer(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Main content area of a document
 */
fun Main(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Generic section of a document
 */
fun Section(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Article content that can stand alone
 */
fun Article(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Sidebar content indirectly related to main content
 */
fun Aside(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Navigation links section
 */
fun Nav(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Contact information for author or owner
 */
fun Address(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

Typography Elements

Elements for text formatting and typography.

/**
 * Heading elements (h1-h6)
 */
fun H1(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun H2(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun H3(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun H4(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun H5(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun H6(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)

/**
 * Paragraph element
 */
fun P(
    attrs: AttrBuilderContext<HTMLParagraphElement>? = null,
    content: ContentBuilder<HTMLParagraphElement>? = null
)

/**
 * Emphasized text (typically italic)
 */
fun Em(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Italic text
 */
fun I(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Bold text
 */
fun B(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Small text (fine print)
 */
fun Small(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Superscript text
 */
fun Sup(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Subscript text
 */
fun Sub(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Block quotation
 */
fun Blockquote(
    attrs: AttrBuilderContext<HTMLQuoteElement>? = null,
    content: ContentBuilder<HTMLQuoteElement>? = null
)

/**
 * Preformatted text (preserves whitespace)
 */
fun Pre(
    attrs: AttrBuilderContext<HTMLPreElement>? = null,
    content: ContentBuilder<HTMLPreElement>? = null
)

/**
 * Code snippet (monospace font)
 */
fun Code(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

List Elements

Elements for creating ordered and unordered lists.

/**
 * Unordered list (bulleted)
 */
fun Ul(
    attrs: AttrBuilderContext<HTMLUListElement>? = null,
    content: ContentBuilder<HTMLUListElement>? = null
)

/**
 * Ordered list (numbered)
 */
fun Ol(
    attrs: AttrBuilderContext<HTMLOListElement>? = null,
    content: ContentBuilder<HTMLOListElement>? = null
)

/**
 * List item (used within Ul or Ol)
 */
fun Li(
    attrs: AttrBuilderContext<HTMLLIElement>? = null,
    content: ContentBuilder<HTMLLIElement>? = null
)

/**
 * Description list
 */
fun DList(
    attrs: AttrBuilderContext<HTMLDListElement>? = null,
    content: ContentBuilder<HTMLDListElement>? = null
)

/**
 * Description term (used within DList)
 */
fun DTerm(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Description definition (used within DList)
 */
fun DDescription(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

Link and Media Elements

Elements for links, images, and multimedia content.

/**
 * Anchor (link) element
 * @param href Link URL
 * @param attrs Additional attributes
 * @param content Link content
 */
fun A(
    href: String? = null,
    attrs: AttrBuilderContext<HTMLAnchorElement>? = null,
    content: ContentBuilder<HTMLAnchorElement>? = null
)

/**
 * Image element
 * @param src Image source URL
 * @param alt Alternative text for accessibility
 * @param attrs Additional attributes
 */
fun Img(
    src: String,
    alt: String? = null,
    attrs: AttrBuilderContext<HTMLImageElement>? = null
)

/**
 * Audio element for audio content
 */
fun Audio(
    attrs: AttrBuilderContext<HTMLAudioElement>? = null,
    content: ContentBuilder<HTMLAudioElement>? = null
)

/**
 * Video element for video content
 */
fun Video(
    attrs: AttrBuilderContext<HTMLVideoElement>? = null,
    content: ContentBuilder<HTMLVideoElement>? = null
)

/**
 * Track element for media resources (captions, subtitles)
 */
fun Track(
    attrs: AttrBuilderContext<HTMLTrackElement>? = null,
    content: ContentBuilder<HTMLTrackElement>? = null
)

/**
 * Source element for media resources
 */
fun Source(
    attrs: AttrBuilderContext<HTMLSourceElement>? = null,
    content: ContentBuilder<HTMLSourceElement>? = null
)

Table Elements

Elements for creating data tables.

/**
 * Table container element
 */
fun Table(
    attrs: AttrBuilderContext<HTMLTableElement>? = null,
    content: ContentBuilder<HTMLTableElement>? = null
)

/**
 * Table caption
 */
fun Caption(
    attrs: AttrBuilderContext<HTMLTableCaptionElement>? = null,
    content: ContentBuilder<HTMLTableCaptionElement>? = null
)

/**
 * Table header section
 */
fun Thead(
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
    content: ContentBuilder<HTMLTableSectionElement>? = null
)

/**
 * Table body section
 */
fun Tbody(
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
    content: ContentBuilder<HTMLTableSectionElement>? = null
)

/**
 * Table footer section
 */
fun Tfoot(
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
    content: ContentBuilder<HTMLTableSectionElement>? = null
)

/**
 * Table row
 */
fun Tr(
    attrs: AttrBuilderContext<HTMLTableRowElement>? = null,
    content: ContentBuilder<HTMLTableRowElement>? = null
)

/**
 * Table header cell
 */
fun Th(
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
    content: ContentBuilder<HTMLTableCellElement>? = null
)

/**
 * Table data cell
 */
fun Td(
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
    content: ContentBuilder<HTMLTableCellElement>? = null
)

/**
 * Table column definition
 */
fun Col(attrs: AttrBuilderContext<HTMLTableColElement>? = null)

/**
 * Table column group
 */
fun Colgroup(
    attrs: AttrBuilderContext<HTMLTableColElement>? = null,
    content: ContentBuilder<HTMLTableColElement>? = null
)

Embedded Content Elements

Elements for embedding external content.

/**
 * Canvas element for drawing graphics
 */
fun Canvas(
    attrs: AttrBuilderContext<HTMLCanvasElement>? = null,
    content: ContentBuilder<HTMLCanvasElement>? = null
)

/**
 * Embedded content element
 */
fun Embed(
    attrs: AttrBuilderContext<HTMLEmbedElement>? = null,
    content: ContentBuilder<HTMLEmbedElement>? = null
)

/**
 * Inline frame for embedding documents
 */
fun Iframe(
    attrs: AttrBuilderContext<HTMLIFrameElement>? = null,
    content: ContentBuilder<HTMLIFrameElement>? = null
)

/**
 * Generic object element for embedded content
 */
fun Object(
    attrs: AttrBuilderContext<HTMLObjectElement>? = null,
    content: ContentBuilder<HTMLObjectElement>? = null
)

/**
 * Parameter for object element
 */
fun Param(
    attrs: AttrBuilderContext<HTMLParamElement>? = null,
    content: ContentBuilder<HTMLParamElement>? = null
)

/**
 * Responsive image container
 */
fun Picture(
    attrs: AttrBuilderContext<HTMLPictureElement>? = null,
    content: ContentBuilder<HTMLPictureElement>? = null
)

/**
 * Image map definition
 */
fun HTMLMap(
    attrs: AttrBuilderContext<HTMLMapElement>? = null,
    content: ContentBuilder<HTMLMapElement>? = null
)

/**
 * Image map area
 */
fun Area(
    attrs: AttrBuilderContext<HTMLAreaElement>? = null,
    content: ContentBuilder<HTMLAreaElement>? = null
)

Interactive Elements

Elements for user interaction and data visualization.

/**
 * Data list for input options
 */
fun Datalist(
    attrs: AttrBuilderContext<HTMLDataListElement>? = null,
    content: ContentBuilder<HTMLDataListElement>? = null
)

/**
 * Scalar measurement indicator
 */
fun Meter(
    attrs: AttrBuilderContext<HTMLMeterElement>? = null,
    content: ContentBuilder<HTMLMeterElement>? = null
)

/**
 * Output element for calculation results
 */
fun Output(
    attrs: AttrBuilderContext<HTMLOutputElement>? = null,
    content: ContentBuilder<HTMLOutputElement>? = null
)

/**
 * Progress indicator
 */
fun Progress(
    attrs: AttrBuilderContext<HTMLProgressElement>? = null,
    content: ContentBuilder<HTMLProgressElement>? = null
)

Utility Elements

Utility elements for layout and formatting.

/**
 * Line break
 */
fun Br(attrs: AttrBuilderContext<HTMLBRElement>? = null)

/**
 * Horizontal rule (divider line)
 */
fun Hr(attrs: AttrBuilderContext<HTMLHRElement>? = null)

Usage Examples:

import org.jetbrains.compose.web.dom.*

// Document structure
renderComposable(rootElementId = "root") {
    Main {
        Header {
            H1 { Text("My Website") }
            Nav {
                Ul {
                    Li { A(href = "/home") { Text("Home") } }
                    Li { A(href = "/about") { Text("About") } }
                    Li { A(href = "/contact") { Text("Contact") } }
                }
            }
        }
        
        Article {
            H2 { Text("Article Title") }
            P { Text("Article content goes here...") }
            
            Blockquote {
                P { Text("This is an important quote.") }
            }
            
            Pre {
                Code { Text("function example() { return 'Hello World'; }") }
            }
        }
        
        Footer {
            P { Text("© 2024 My Website") }
        }
    }
}

// Table example
Table {
    Caption { Text("User Data") }
    Thead {
        Tr {
            Th { Text("Name") }
            Th { Text("Age") }
            Th { Text("City") }
        }
    }
    Tbody {
        Tr {
            Td { Text("Alice") }
            Td { Text("25") }
            Td { Text("New York") }
        }
        Tr {
            Td { Text("Bob") }
            Td { Text("30") }
            Td { Text("San Francisco") }
        }
    }
}

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-html--core

docs