Compose for Desktop: Milestone 1 Released

Today, we are excited to present the first milestone release of Jetpack Compose for Desktop, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable. We invite you to take this technology preview out for a test drive, and we eagerly await your feedback!

Visit the Compose for Desktop landing page

Delightful desktop UI development

Compose for Desktop provides a declarative and reactive approach to creating user interfaces with Kotlin, with an API inspired by other modern frameworks like React and Flutter. At its core, Compose for Desktop allows you to declare your desktop UI in code by combining composable functions. It automatically takes care of keeping your application’s state and visual representation synchronized.

The project is based on Google’s Jetpack Compose, a toolkit for UI development on Android. One wonderful consequence of this is that the knowledge you might have already picked up from working with Jetpack Compose on Android transfers directly to Compose for Desktop, and vice versa. All core APIs provided by Compose for Desktop behave just like their mobile counterparts, including modifiers, UI elements, or layout primitives. In fact, the core of Compose for Desktop is being developed in collaboration with Google’s Jetpack Compose, ensuring that the two technologies will evolve together. This also makes it possible to share significant parts of your UI’s implementation between desktop and Android.

Getting started with Compose for Desktop is quick. After setting up the project dependencies, you can express a simple stateful user interface in just a few lines of code, and a rich library of ready-to-use Material Design elements helps you jumpstart the creation of your UI.

import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.material.*
import androidx.compose.runtime.*

fun main() = Window(title = "Compose for Desktop") {
   var count by remember { mutableStateOf(0) }
   MaterialTheme {
       Button(onClick = { count++ }) {
           Text(if (count == 0) "Hello World" else "Clicked $count!")
       }
   }
}

But Compose for Desktop goes beyond the UI elements, composable functions, and other concepts that can also be found in the Android counterpart.

Desktop-specific APIs

To build properly integrated desktop UIs for your applications, Compose for Desktop comes with its own set of APIs that expose desktop-specific functionality. They are structured just like the other Compose APIs and allow your application to react to mouse pointer events, query and manipulate the size and positioning of your application windows, create tray icons or menu bar entries, and more.

fun main() {
   Window {
       var windowSize by remember { mutableStateOf(IntSize.Zero) }
       var windowLocation by remember { mutableStateOf(IntOffset.Zero) }
       AppWindowAmbient.current?.apply {
           events.onResize = { windowSize = it }
           events.onRelocate = { windowLocation = it }
       }
       Text(text = "Location: ${windowLocation}\nSize: ${windowSize}")
   }
}

We want to cover all relevant functionality with these desktop APIs as soon as possible. To do this, we need to get a sense of which integrations you are missing the most in this milestone release, so we can prioritize the continued evolution of these interfaces. Please share your feedback in this area.

Smooth migrations and full control

Just like the Kotlin programming language itself, Compose for Desktop follows the philosophy of easy interoperability and smooth migrations. As such, Compose for Desktop integrates with Swing and AWT, unlocking the power of those Java graphics APIs for your Compose for Desktop applications. This integration also allows you to gradually migrate applications that use these frameworks to Compose for Desktop.

fun main() = Window(title = "JFrame properties") {
   var alwaysOnTop by remember { mutableStateOf(false) }
   onCommit(alwaysOnTop) {
       val jFrame = AppManager.focusedWindow?.window
       jFrame?.let {
           // Use JFrame-specific methods
           it.isAlwaysOnTop = alwaysOnTop
       }
   }
   MaterialTheme {
       Column {
           Button(onClick = { alwaysOnTop = !alwaysOnTop }) {
               Text("Toggle always on top")
           }
       }
   }
}

For maximum flexibility and control, we also expose a significant part of the API provided by the native Skia graphics library which powers Compose for Desktop for low level rendering, allowing you to take full control of how your application is rendered.

Learning Compose for Desktop

We hope that you are as excited as we are about Compose for Desktop! To give it a try, we recommend going through our Getting Started tutorial, which explains the basic steps required to set up and run an application powered by Compose for Desktop. From there, you can take a look at the other tutorials available in the repository, which cover a range of topics like manipulating images, working with mouse events, and sending desktop notifications. An overview of this content is available on the Compose for Desktop landing page.

Visit the Compose for Desktop landing page

A great source of learning materials for general topics related to Jetpack Compose is the Android Developer Portal, which provides explanations for a lot of concepts involving the core API that is also included with Compose for Desktop. For an overview of Compose’s mental model and its basic API, take a look at the 10-step Jetpack Compose Pathway, which covers these topics with articles, videos, and more.

If you want to explore more complex Compose for Desktop use cases, check out our demo applications, which even include examples of how to share user interfaces between desktop and Android using Kotlin Multiplatform.

Pre-release notes

This is the first milestone release of Compose for Desktop. This means that you might experience some hiccups or find that some features are missing. Please also keep in mind that before a first stable release, some of the APIs provided by Compose for Desktop may still change. However, we are working hard toward a first stable and production-ready release, and strongly rely on your feedback to help us achieve this.

Give feedback and join the discussion!

Milestone releases are the most important time for you to give us feedback, because it allows us to fix critical issues or include additional features before a stable release. Should you encounter any problems while working with Compose for Desktop, or identify any use cases that are not yet covered by our desktop-specific APIs, please share them with us in the project’s issue tracker.

If you want to talk to other developers and team members, we also invite you to join the discussion on the Kotlin Slack. In #compose-desktop you can find discussions about Compose for Desktop, and in #compose you can discuss general topics involving Compose and Jetpack Compose on Android.

We hope you will have fun building your user interfaces using Compose for Desktop!