or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-styling.mdevent-handling.mdforms-inputs.mdhtml-elements.mdindex.mdsvg-support.md
tile.json

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
mavenpkg:maven/org.jetbrains.compose.html/html-core@1.8.x

To install, run

npx @tessl/cli install tessl/maven-org-jetbrains-compose-html--core@1.8.0

index.mddocs/

Compose Web HTML

Compose Web HTML is a Kotlin library that enables building reactive web user interfaces using a declarative, type-safe HTML DSL. It provides comprehensive HTML element support, modern CSS styling capabilities, robust event handling, and full SVG integration, all with Kotlin's type safety and Compose's reactivity model.

Package Information

  • Package Name: org.jetbrains.compose.html:html-core
  • Package Type: maven
  • Language: Kotlin
  • Target: JavaScript (Kotlin/JS)
  • Installation: Add to Gradle dependencies: implementation("org.jetbrains.compose.html:html-core:1.8.2")

Core Imports

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

Basic Usage

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

fun main() {
    // Mount composition to a DOM element
    renderComposable(rootElementId = "root") {
        Div({
            style {
                display(DisplayStyle.Flex)
                flexDirection(FlexDirection.Column)
                gap(16.px)
                padding(20.px)
            }
        }) {
            H1 { Text("Welcome to Compose Web") }
            
            P {
                Text("Build reactive web UIs with type-safe HTML DSL")
            }
            
            Button({
                onClick { event ->
                    console.log("Button clicked!")
                }
            }) {
                Text("Click Me")
            }
        }
    }
}

Architecture

Compose Web HTML is built around several key components:

  • Composition System: Integration with Compose runtime for reactive UI updates and state management
  • HTML DSL: Type-safe builders for all HTML elements with proper attribute validation
  • CSS System: Comprehensive CSS property support with type-safe units, colors, and modern layout features
  • Event Handling: Synthetic event system that wraps native browser events with type safety
  • DOM Integration: Direct DOM manipulation through Compose's applier system for optimal performance
  • Controlled/Uncontrolled: Flexible input handling supporting both Compose-managed and browser-managed state

Capabilities

HTML Elements

Complete HTML element support including document structure, typography, forms, tables, media, and utility elements. All elements support attributes, styling, and event handling.

// Container elements
fun Div(attrs: AttrBuilderContext<HTMLDivElement>? = null, content: ContentBuilder<HTMLDivElement>? = null)
fun Span(attrs: AttrBuilderContext<HTMLSpanElement>? = null, content: ContentBuilder<HTMLSpanElement>? = null)

// Typography
fun H1(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
fun P(attrs: AttrBuilderContext<HTMLParagraphElement>? = null, content: ContentBuilder<HTMLParagraphElement>? = null)

// Forms
fun Input(type: InputType<String>, attrs: AttrBuilderContext<HTMLInputElement>? = null)
fun Button(attrs: AttrBuilderContext<HTMLButtonElement>? = null, content: ContentBuilder<HTMLButtonElement>? = null)

// Text content
fun Text(value: String)

HTML Elements

CSS Styling

Modern CSS support with type-safe properties, units, colors, and layout systems including Flexbox and Grid. Supports both inline styles and stylesheet classes.

// Style application
fun style(builder: StyleScope.() -> Unit)

// Layout properties
fun StyleScope.display(value: DisplayStyle)
fun StyleScope.position(value: Position)
fun StyleScope.flexDirection(value: FlexDirection)
fun StyleScope.gridTemplateColumns(value: String)

// Box model
fun StyleScope.width(value: CSSNumeric)
fun StyleScope.margin(value: CSSNumeric)
fun StyleScope.padding(value: CSSNumeric)
fun StyleScope.border(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)

// Typography
fun StyleScope.fontSize(value: CSSNumeric)
fun StyleScope.fontWeight(value: FontWeight)
fun StyleScope.color(value: CSSColorValue)

// Units and values
val Number.px: CSSNumeric
val Number.em: CSSNumeric
val Number.percent: CSSNumeric

CSS Styling

Event Handling

Comprehensive event system with synthetic events for mouse, keyboard, touch, focus, form, and animation interactions. All events are type-safe and provide access to native event properties.

// Event listener scope (available in attrs blocks)
fun EventsListenerScope.onClick(listener: (SyntheticMouseEvent) -> Unit)
fun EventsListenerScope.onInput(listener: (SyntheticInputEvent) -> Unit)
fun EventsListenerScope.onKeyDown(listener: (SyntheticKeyboardEvent) -> Unit)
fun EventsListenerScope.onFocus(listener: (SyntheticFocusEvent) -> Unit)

// Synthetic event types
interface SyntheticMouseEvent : SyntheticEvent<MouseEvent>
interface SyntheticKeyboardEvent : SyntheticEvent<KeyboardEvent>
interface SyntheticInputEvent : SyntheticEvent<InputEvent>
interface SyntheticFocusEvent : SyntheticEvent<FocusEvent>

Event Handling

Form Elements and Input Handling

Specialized form elements with type-safe input handling supporting both controlled and uncontrolled modes. Comprehensive input type support with validation attributes.

// Specialized input elements
fun TextInput(value: String? = null, attrs: AttrBuilderContext<HTMLInputElement>? = null)
fun NumberInput(value: Number? = null, min: Number? = null, max: Number? = null, attrs: AttrBuilderContext<HTMLInputElement>? = null)
fun CheckboxInput(checked: Boolean? = null, attrs: AttrBuilderContext<HTMLInputElement>? = null)
fun RadioInput(checked: Boolean? = null, attrs: AttrBuilderContext<HTMLInputElement>? = null)

// Form elements
fun Form(action: String? = null, attrs: AttrBuilderContext<HTMLFormElement>? = null, content: ContentBuilder<HTMLFormElement>? = null)
fun Select(attrs: AttrBuilderContext<HTMLSelectElement>? = null, multiple: Boolean = false, content: ContentBuilder<HTMLSelectElement>? = null)
fun TextArea(value: String? = null, attrs: AttrBuilderContext<HTMLTextAreaElement>? = null)

// Input types
sealed class InputType<T>
object InputType.Text : InputType<String>
object InputType.Number : InputType<String>
object InputType.Email : InputType<String>
object InputType.Password : InputType<String>

Forms and Input Handling

SVG Support

Complete SVG element support for scalable graphics including shapes, text, gradients, effects, and animations. All SVG elements integrate with the same styling and event systems.

// SVG container
fun Svg(viewBox: String? = null, attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)

// SVG shapes
fun Circle(cx: Number, cy: Number, r: Number, attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)
fun Rect(x: Number, y: Number, width: Number, height: Number, attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)
fun Path(d: String, attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)

// SVG text
fun SvgText(text: String, x: Number? = null, y: Number? = null, attrs: AttrBuilderContext<SVGElement>? = null)

// SVG effects
fun LinearGradient(id: String? = null, attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)
fun Filter(attrs: AttrBuilderContext<SVGElement>? = null, content: ContentBuilder<SVGElement>? = null)

SVG Support

Composition and Rendering

Core composition functions for mounting and managing Compose Web applications in the browser DOM.

// Main composition functions
fun <TElement : Element> renderComposable(
    root: TElement,
    monotonicFrameClock: MonotonicFrameClock = DefaultMonotonicFrameClock,
    content: @Composable DOMScope<TElement>.() -> Unit
): Composition

fun renderComposable(
    rootElementId: String,
    content: @Composable DOMScope<Element>.() -> Unit
): Composition

fun renderComposableInBody(
    content: @Composable DOMScope<HTMLBodyElement>.() -> Unit
): Composition

// DOM scope interface
interface DOMScope<out TElement : Element> {
    val DisposableEffectScope.scopeElement: TElement
}

Types

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

// Attribute scope interfaces
interface AttrsScope<out TElement : Element>
interface EventsListenerScope

// CSS value types
interface CSSNumeric
interface CSSColorValue
interface StyleScope

// Element scopes
interface ElementScope<out TElement : Element>

// Annotations
@RequiresOptIn("This API is experimental and is likely to change in the future.")
annotation class ExperimentalComposeWebApi

@RequiresOptIn("This SVG API is experimental and is likely to change in the future.")
annotation class ExperimentalComposeWebSvgApi