Introducing Jetpack Compose for Web: Building Multi‑Platform UI with Kotlin

Jetpack Compose for Web is a new UI toolkit from JetBrains that extends the modern Android Jetpack Compose framework to the web, allowing developers to write responsive web interfaces in Kotlin.

The toolkit is currently in technical preview and aims to enable a single codebase to run on Web, desktop, and Android, sharing UI components across platforms.

Example code shows a simple greeting component using renderComposable and a button that updates the displayed text.

fun greet() = listOf("Hello","Hallo","Hola","Servus").random()
renderComposable("greetingContainer") {
    var greeting by remember { mutableStateOf(greet()) }
    Button(attrs = { onClick { greeting = greet() } }) {
        Text(greeting)
    }
}

Compose for Web provides a type‑safe DOM API, allowing developers to construct UI with Kotlin DSLs for HTML and CSS, integrate with JavaScript libraries, and create multi‑platform widgets using Kotlin’s expect‑actual mechanism.

Further examples demonstrate building a counter component, defining a stylesheet with StyleSheet , and using CSS variables via CSSVariables to style components.

object MyStyleSheet : StyleSheet() {
    val container by style {
        border(1.px, LineStyle.Solid, Color.RGB(255,0,0))
    }
}

These snippets illustrate how developers can rapidly prototype and share UI code across different platforms using Jetpack Compose for Web.