Introducing Jetpack Compose for Web: A Multi‑Platform UI Toolkit Using Kotlin

Hello everyone, I am Lei.

Recently I have been thinking about developing an app, and I discovered a multi‑platform UI debugging tool that allows a single codebase to run on multiple platforms – truly impressive, so I share it here.

Preface

The tool is the newly released "Jetpack Compose for Web" from the renowned JetBrains company. According to the official description, the project is based on Google’s modern UI toolkit Jetpack Compose and supports writing responsive Web UI with Kotlin.

Jetpack Compose is a new Android toolkit for building native interfaces. It simplifies and speeds up UI development on Android by using less code, powerful tools, and an intuitive Kotlin API.

Note

At the end of the article there are 7,701 pages of big‑tech interview questions.

UI Code and Preview

Jetpack Compose for Web can simplify and accelerate UI development for Web applications, aiming to share UI code across Web, desktop, and Android apps with a single codebase. It is currently in the technical preview stage.

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

Building User Interfaces with Compose for Web

Using Compose for Web, developers write Kotlin code and apply Jetpack Compose concepts and APIs to build responsive Web UIs that express application 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 style sheets with a type‑safe CSS DSL for full visual control.

Integrate with other JavaScript libraries via DOM sub‑trees.

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

By leveraging Kotlin’s expect‑actual mechanism, developers can provide platform‑specific implementations and build Compose widgets that run on Android, desktop, and Web.

A set of experimental layout primitives and APIs, similar to those in Compose for Desktop/Android, is available.

Example: Simple Counter Using 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("+") }
    }
}

Declaring and Using Style Sheets

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()
    }
}

Declaring and Using CSS Variables

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

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!")
        }
    }
}

Recent technical hot articles and recommended past posts are listed below, along with a link to a 7,701‑page PDF of big‑tech interview questions covering Java, JVM, concurrency, design patterns, databases, messaging, Linux, networking, and more.