Unlock Multi‑Platform UI with Jetpack Compose for Web

Jetpack Compose for Web is JetBrains' newly announced UI debugging tool that enables developers to write responsive web interfaces using Kotlin, with the goal of sharing UI code across Web, desktop, and Android platforms. The project is currently in a technical preview stage.

1. Introduction

The tool is called Jetpack Compose for Web . Jetpack Compose itself is a modern Android UI toolkit that simplifies and accelerates UI development with less code, powerful tools, and an intuitive Kotlin API.

UI code and preview are shown below.

Jetpack Compose for Web simplifies and speeds up Web UI development, aiming to enable a single codebase to run on Web, desktop, and Android applications.

fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random()

renderComposable("greetingContainer") {
    var greeting by remember { mutableStateOf(greet()) }
    Button(attrs = { onClick { greeting = greet() } }) {
        Text(greeting)
    }
}
// Result: Servus

2. Building UI with Compose for Web

Using Compose for Web, developers write responsive web UIs with Kotlin, applying Jetpack Compose concepts and APIs to express state, behavior, and logic.

Composable DOM API

Express design and layout through DOM elements and HTML tags

Build UI representations with a type‑safe HTML DSL

Create stylesheets with a type‑safe CSS DSL for full visual control

Integrate with other JavaScript libraries via the DOM subtree

fun main() {
    renderComposable("root") {
        var platform by remember { mutableStateOf("a platform") }
        P {
            Text("Welcome to Compose for $platform! ")
            Button(attrs = { onClick { platform = "Web" } }) {
                Text("...for what?")
            }
        }
        A("https://www.jetbrains.com/lp/compose-web") { Text("Learn more!") }
    }
}

Multi‑platform widgets with Web support

Leverage Kotlin's expect‑actual mechanism to provide platform‑specific implementations, enabling Compose widgets to run on Android, desktop, and Web

Experimental layout primitives and APIs similar to Compose for Desktop/Android

3. Example Code

Simple counter with composable DOM

fun main() {
    val count = mutableStateOf(0)
    renderComposable(rootElementId = "root") {
        Button(attrs = { onClick { count.value = count.value - 1 } }) { Text("-") }
        Span(style = { padding(15.px) }) { Text("${count.value}") }
        Button(attrs = { onClick { count.value = count.value + 1 } }) { Text("+") }
    }
}

Declare and use stylesheet

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

@Composable
fun MyComponent() {
    Div(attrs = { classes(MyStyleSheet.container) }) { Text("Hello world!") }
}

fun main() {
    renderComposable(rootElementId = "root") {
        Style(MyStyleSheet)
        MyComponent()
    }
}

Declare and use CSS variables

object MyVariables : CSSVariables {
    val contentBackgroundColor by variable<Color>()
}

object MyStyleSheet : StyleSheet() {
    val container by style { MyVariables.contentBackgroundColor(Color("blue")) }
    val content by style { backgroundColor(MyVariables.contentBackgroundColor.value()) }
}

@Composable
fun MyComponent() {
    Div(attrs = { classes(MyStyleSheet.container) }) {
        Span(attrs = { classes(MyStyleSheet.content) }) { Text("Hello world!") }
    }
}