CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

Compose Multiplatform foundation library for building web UIs with type-safe HTML DSL, CSS-in-Kotlin, and event handling, compiled for WebAssembly/JavaScript target

—

Pending
Overview
Eval results
Files

html-elements.mddocs/

HTML Elements

Complete set of type-safe HTML element constructors providing composable functions for all standard HTML elements with proper attribute scoping and content builders.

Core Imports

import androidx.compose.runtime.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.attributes.*

Capabilities

Text Content

Core text elements for displaying and structuring textual content.

/**
 * Creates a text node with the specified content
 * @param value - The text content to display
 */
@Composable
fun Text(value: String)

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

/**
 * Heading elements H1 through H6
 */
@Composable
fun H1(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

@Composable
fun H2(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

@Composable
fun H3(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

@Composable
fun H4(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

@Composable
fun H5(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

@Composable
fun H6(
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
    content: ContentBuilder<HTMLHeadingElement>? = null
)

Usage Examples:

@Composable
fun TextContent() {
    H1 { Text("Main Title") }
    H2 { Text("Subtitle") }
    P { Text("This is a paragraph of text content.") }
    
    P({
        style {
            fontSize(16.px)
            lineHeight(1.5)
        }
    }) {
        Text("Styled paragraph with custom CSS.")
    }
}

Container Elements

Structural elements for organizing and containing other elements.

/**
 * Generic container element (div)
 */
@Composable
fun Div(
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
    content: ContentBuilder<HTMLDivElement>? = null
)

/**
 * Inline container element (span)
 */
@Composable
fun Span(
    attrs: AttrBuilderContext<HTMLSpanElement>? = null,
    content: ContentBuilder<HTMLSpanElement>? = null
)

/**
 * Semantic HTML5 structural elements
 */
@Composable
fun Header(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Footer(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Nav(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Main(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Section(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Article(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

@Composable
fun Aside(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

Usage Examples:

@Composable
fun Layout() {
    Header({
        style {
            padding(20.px)
            backgroundColor(Color.lightgray)
        }
    }) {
        Nav {
            // Navigation content
        }
    }
    
    Main {
        Article {
            H1 { Text("Article Title") }
            P { Text("Article content goes here.") }
        }
        
        Aside {
            H3 { Text("Sidebar") }
            P { Text("Sidebar content.") }
        }
    }
    
    Footer {
        P { Text("© 2024 My Website") }
    }
}

Text Formatting

Elements for styling and emphasizing text content.

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

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

/**
 * Emphasized text (semantic emphasis)
 */
@Composable
fun Em(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Small text formatting
 */
@Composable
fun Small(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

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

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

/**
 * Block quote element
 */
@Composable
fun Blockquote(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Inline code formatting
 */
@Composable
fun Code(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

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

Lists

List elements for organizing content in ordered and unordered structures.

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

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

/**
 * List item element
 */
@Composable
fun Li(
    attrs: AttrBuilderContext<HTMLLIElement>? = null,
    content: ContentBuilder<HTMLLIElement>? = null
)

/**
 * Definition list container
 */
@Composable
fun DList(
    attrs: AttrBuilderContext<HTMLDListElement>? = null,
    content: ContentBuilder<HTMLDListElement>? = null
)

/**
 * Definition term element
 */
@Composable
fun DTerm(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

/**
 * Definition description element
 */
@Composable
fun DDescription(
    attrs: AttrBuilderContext<HTMLElement>? = null,
    content: ContentBuilder<HTMLElement>? = null
)

Usage Examples:

@Composable
fun ListExamples() {
    // Unordered list
    Ul {
        Li { Text("First item") }
        Li { Text("Second item") }
        Li { Text("Third item") }
    }
    
    // Ordered list
    Ol({
        style {
            listStyleType("decimal")
        }
    }) {
        Li { Text("Step one") }
        Li { Text("Step two") }
        Li { Text("Step three") }
    }
    
    // Definition list
    DList {
        DTerm { Text("HTML") }
        DDescription { Text("HyperText Markup Language") }
        DTerm { Text("CSS") }
        DDescription { Text("Cascading Style Sheets") }
    }
}

Interactive Elements

Elements for user interaction including links, buttons, and other interactive components.

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

/**
 * Button element
 */
@Composable
fun Button(
    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
    content: ContentBuilder<HTMLButtonElement>? = null
)

Usage Examples:

@Composable
fun InteractiveElements() {
    A(
        href = "https://example.com",
        attrs = {
            target(ATarget.Blank)
            style {
                color(Color.blue)
                textDecoration("underline")
            }
        }
    ) {
        Text("Visit Example.com")
    }
    
    Button({
        onClick { event ->
            console.log("Button clicked!")
        }
        style {
            padding(12.px, 24.px)
            backgroundColor(Color.blue)
            color(Color.white)
            border(0.px)
            borderRadius(4.px)
        }
    }) {
        Text("Click Me")
    }
}

Media Elements

Elements for embedding media content including images, audio, and video.

/**
 * Image element
 */
@Composable
fun Img(
    src: String,
    alt: String = "",
    attrs: AttrBuilderContext<HTMLImageElement>? = null
)

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

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

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

/**
 * Media source element
 */
@Composable
fun Source(
    attrs: AttrBuilderContext<HTMLSourceElement>? = null
)

/**
 * Media track element
 */
@Composable
fun Track(
    attrs: AttrBuilderContext<HTMLTrackElement>? = null
)

/**
 * Picture element for responsive images
 */
@Composable
fun Picture(
    attrs: AttrBuilderContext<HTMLPictureElement>? = null,
    content: ContentBuilder<HTMLPictureElement>? = null
)

Table Elements

Complete set of table elements for displaying tabular data.

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

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

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

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

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

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

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

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

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

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

Self-closing Elements

Elements that do not contain content and close themselves.

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

/**
 * Horizontal rule element
 */
@Composable
fun Hr(
    attrs: AttrBuilderContext<HTMLHRElement>? = null
)

Embedded Content

Elements for embedding external content and objects.

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

/**
 * Embedded object element
 */
@Composable
fun Object(
    attrs: AttrBuilderContext<HTMLObjectElement>? = null,
    content: ContentBuilder<HTMLObjectElement>? = null
)

/**
 * Object parameter element
 */
@Composable
fun Param(
    attrs: AttrBuilderContext<HTMLParamElement>? = null
)

/**
 * Inline frame element
 */
@Composable
fun Iframe(
    attrs: AttrBuilderContext<HTMLIFrameElement>? = null,
    content: ContentBuilder<HTMLIFrameElement>? = null
)

/**
 * Image map element (renamed to avoid Kotlin keyword conflict)
 */
@Composable
fun HTMLMap(
    attrs: AttrBuilderContext<HTMLMapElement>? = null,
    content: ContentBuilder<HTMLMapElement>? = null
)

/**
 * Image map area element
 */
@Composable
fun Area(
    attrs: AttrBuilderContext<HTMLAreaElement>? = null
)

Types

typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit

interface ElementScope<out TElement> {
    val scopeElement: TElement
}

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

docs

css-styling.md

event-handling.md

form-controls.md

html-attributes.md

html-elements.md

index.md

tile.json