Compose Hot Reload

Compose Hot Reload helps you visualize and experiment with UI changes while working on a Compose Multiplatform project.

At the moment, Compose Hot Reload is only available when you include a desktop target in your multiplatform project. We're exploring adding support for other targets in the future. In the meantime, using the desktop app as your sandbox lets you quickly experiment with UI changes in common code without interrupting your flow.

Add Compose Hot Reload to your project

Compose Hot Reload can be added in two ways, by:

Creating a project from scratch in IntelliJ IDEA or Android Studio
Adding it as a Gradle plugin to an existing project

From scratch

This section walks you through the steps to create a multiplatform project with a desktop target in IntelliJ IDEA and Android Studio. When your project is created, Compose Hot Reload is automatically added.

In the quickstart, complete the instructions to set up your environment for Kotlin Multiplatform development.
In IntelliJ IDEA, select File | New | Project.
In the panel on the left, select Kotlin Multiplatform.
Specify the Name, Group, and Artifact fields in the New Project window
Select the Desktop target and click Create.

To an existing project

This section walks you through the steps to add Compose Hot Reload to an existing multiplatform project. The steps refer to the project from the Create an app with shared logic and UI tutorial as a reference.

In your project, update the version catalog. In gradle/libs.versions.toml, add the following code:
composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload"}
To learn more about how to use a version catalog to centrally manage dependencies across your project, see our Gradle best practices.
In the build.gradle.kts of your parent project (ComposeDemo/build.gradle.kts), add the following code to your plugins{} block:
plugins { alias(libs.plugins.composeHotReload) apply false }
This prevents the Compose Hot Reload plugin from being loaded multiple times in each of your subprojects.
In the build.gradle.kts of the subproject containing your multiplatform application (ComposeDemo/composeApp/build.gradle.kts), add the following code to your plugins{} block:
plugins { alias(libs.plugins.composeHotReload) }
In your settings.gradle.kts file, add a plugin that's required for the Compose Hot Reload plugin:
plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "0.10.0" }
Click the Sync Gradle Changes button to synchronize Gradle files:

Use Compose Hot Reload

In the desktopMain directory, open the main.kt file and update the main() function:
fun main() = application { Window( onCloseRequest = ::exitApplication, alwaysOnTop = true, title = "composedemo", ) { App() } }
By setting the alwaysOnTop variable to true, the generated desktop app stays on top of all your windows, making it easier to edit your code and see changes live.
In the commonMain directory, open the App.kt file and update the Button composable:
Button(onClick = { showContent = !showContent }) { Column { Text(Greeting().greet()) } }
Now, the text for the button is controlled by the greet() function.
In the commonMain directory, open the Greeting.kt file and update the greet() function:
fun greet(): String { return "Hello!" }
In the desktopMain directory, open the main.kt file and click the Run icon in the gutter. Select Run 'composeApp [desktop]' with Compose Hot Reload (Alpha).
Update the string returned from the greet() function and see the desktop app update automatically.

Congratulations! You've seen Compose Hot Reload in action. Now you can experiment with changing text, images, formatting, UI structure, and more, without having to restart the desktop run configuration after every change.

Get help

If you encounter any problems using Compose Hot Reload, let us know by creating a GitHub issue.

Last modified: 21 May 2025