or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-styling.mdevent-handling.mdform-controls.mdhtml-attributes.mdhtml-elements.mdindex.md
tile.json

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

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

To install, run

npx @tessl/cli install tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js@1.8.0

index.mddocs/

Compose Web Foundation (WASM/JS)

Compose Web Foundation provides comprehensive support for building modern web user interfaces using Compose Multiplatform. Compiled for WebAssembly/JavaScript target, it offers a type-safe HTML DSL, CSS-in-Kotlin styling system, and robust event handling, enabling developers to create web applications with the same declarative patterns used in other Compose targets.

Package Information

  • Package Name: org.jetbrains.compose.foundation:foundation-wasm-js
  • Package Type: Maven
  • Language: Kotlin
  • Installation: Add to your build.gradle.kts:
dependencies {
    implementation("org.jetbrains.compose.foundation:foundation-wasm-js:1.8.2")
}

Core Imports

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

Basic Usage

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

@Composable
fun App() {
    Div({
        style {
            padding(16.px)
            backgroundColor(Color.lightblue)
        }
    }) {
        H1 { Text("Welcome to Compose Web") }
        
        P({
            style {
                fontSize(18.px)
                color(Color.darkblue)
            }
        }) {
            Text("Building web UIs with type-safe HTML and CSS")
        }
        
        Button({
            onClick { event ->
                console.log("Button clicked!")
            }
        }) {
            Text("Click Me")
        }
    }
}

Architecture

Compose Web Foundation is organized around several key systems:

  • HTML DSL: Type-safe composable functions for all HTML elements with proper attribute handling
  • CSS System: Kotlin-based CSS with type-safe properties, units, and selectors
  • Event Handling: Synthetic event system providing type-safe event handling across all DOM events
  • Attribute Management: Comprehensive attribute system supporting HTML global attributes and element-specific attributes
  • Style Integration: Seamless integration between inline styles and CSS class-based styling

Capabilities

HTML Elements

Complete set of type-safe HTML element constructors with proper attribute scoping and content builders.

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

@Composable
fun Text(value: String)

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

HTML Elements

CSS Styling

Type-safe CSS-in-Kotlin system with comprehensive property support, units, and responsive design capabilities.

interface StyleScope {
    fun width(value: CSSNumeric)
    fun height(value: CSSNumeric)
    fun backgroundColor(value: CSSColorValue)
    fun padding(value: CSSNumeric)
    fun margin(value: CSSNumeric)
}

val Number.px: CSSSizeValue<CSSUnitLength>
val Number.em: CSSSizeValue<CSSUnitLength>
val Number.percent: CSSSizeValue<CSSUnitPercentage>

CSS Styling

HTML Attributes

Comprehensive attribute system supporting global HTML attributes and element-specific attributes with type safety.

interface AttrsScope<TElement> {
    fun id(value: String)
    fun classes(vararg classes: String)
    fun style(builder: StyleScope.() -> Unit)
    fun onClick(listener: (SyntheticMouseEvent) -> Unit)
    fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult)
}

HTML Attributes

Event Handling

Synthetic event system providing type-safe event handling for all DOM events with proper event delegation and lifecycle management.

abstract class SyntheticEvent<out Element> {
    val target: Element
    val currentTarget: Element
    val bubbles: Boolean
    val cancelable: Boolean
    
    fun preventDefault()
    fun stopPropagation()
    fun stopImmediatePropagation()
}

interface SyntheticMouseEvent : SyntheticEvent<Element> {
    val clientX: Double
    val clientY: Double
    val button: Short
    val buttons: Short
}

Event Handling

Form Controls

Specialized form input components with controlled and uncontrolled patterns, validation support, and accessibility features.

@Composable
fun TextInput(
    value: String,
    attrs: AttrBuilderContext<HTMLInputElement>? = null
)

@Composable
fun CheckboxInput(
    checked: Boolean,
    attrs: AttrBuilderContext<HTMLInputElement>? = null
)

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

Form Controls

Types

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

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

interface CSSColorValue
interface CSSNumeric
interface CSSSizeValue<T> : CSSNumeric

sealed class DisplayStyle
sealed class Color : CSSColorValue