Compose Multiplatform Beta

Compose Multiplatform Beta

Fast reactive Desktop and Web UI framework for Kotlin, based on Google’s modern toolkit and brought to you by JetBrains

Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code sharing between Android, Desktop and Web. Currently in Beta.

Explore on GitHub

Desktop app

Compose for Desktop provides a declarative and reactive approach to creating desktop user interfaces with Kotlin. Combine composable functions to build your user interface, and enjoy full tooling support from your IDE and build system – no XML or templating language required.

Compose for Desktop targets the JVM, and supports high-performance, hardware-accelerated UI rendering on all major desktop platforms (macOS, Windows, and Linux) by leveraging the powerful native Skia graphics library. Native application distributions can be created with a single click.

Windows

Windows

macOS

macOS

Linux

Linux

Web app

Compose for Web allows you to build reactive user interfaces for the web in Kotlin, using the concepts and APIs of Jetpack Compose to express the state, behavior, and logic of your application.

Compose for Web provides multiple ways of declaring user interfaces in Kotlin code, allowing you to have full control over your website layout with a declarative DOM API.

Web

Web

Compose for Desktop Features

Desktop extensions for menus, keyboard shortcuts, window manipulation, notification management, and more.

Hardware accelerated rendering with Skia.

Powerful text rendering and layout for many languages.

Excellent AWT and Swing interoperability.

Code sharing with Jetpack Compose Android applications via Kotlin Multiplatform.

Android Compose compatibility at the UI element level.

Support for creating standalone application bundles.

See all features

Compose for Web Features

Same reactive engine that is used on Android/Desktop allows using a common codebase.

Framework for rich UI creation for Kotlin/JS.

Convenient Kotlin DOM DSL that covers all common frontend development scenarios.

Comprehensive CSS-in-Kotlin/JS API.

See all features

Get started with Compose for Desktop

Work through our tutorials to learn about the features Compose for Desktop has to offer.

Start tutorial here

In this tutorial we will see how to create simple desktop UI application using the Compose UI framework.

View tutorial

Image viewer application

An example of an image gallery showing images from a remote server, using Compose for Desktop and Android.

Explore app

Issue browser example

GitHub issues viewer written with Compose for Desktop.

Explore app

Please note that Compose for Desktop is currently in the Beta development stage and may not be suitable for production applications.

Get started with Compose for Web

Work through our tutorials to learn about the features Compose for Web has to offer.

Start tutorial here

In this tutorial we will see how to create our first web UI application using Compose for Web.

View tutorial

Landing page example

An example of a landing page built using the Composable DOM API and Stylesheet DSL.

Explore the source code

Falling Balls app example

This example demonstrates the use of multiplatform widgets – sharing user interface code between Compose for Desktop and Web.

Explore the source code

Play

Please note that Compose for Web is currently in the Beta development stage and may not be suitable for production applications.

Code samples

pointerMoveFilter + mouseClickable

fun main() = singleWindowApplication {

var isActivated by remember { mutableStateOf(false) }

var isHovered by remember { mutableStateOf(false) }

var size by animateDpAsState(if (isActivated) 300.dp else 200.dp)

Box(

Modifier

.size(size)

.background(if (isHovered) Color.Red else Color.Blue)

.pointerMoveFilter(

onEnter = { isHovered = true; false },

onExit = { isHovered = false; false },

)

.mouseClickable {

if (buttons.isPrimaryPressed) {

isActivated = true

} else if (buttons.isSecondaryPressed) {

isActivated = false

}

}

)

}

Feel free to join the #compose-desktop channel on Kotlin Slack to discuss desktop part of Compose Multiplatform, the #compose-web to discuss web part of Compose Multiplatform or #compose for general Compose and Jetpack Compose discussions.