Skip to main content
Get up and running with Compose Hot Reload quickly. This guide walks you through creating a simple counter app with hot reload enabled.
This quickstart assumes you’re starting with an existing Compose Multiplatform project. If you’re creating a new project from scratch, follow the Kotlin Multiplatform quickstart and select the desktop target.

Prerequisites

Before you begin, ensure your project meets these requirements:
  • Kotlin 2.1.20 or higher
  • Compose Multiplatform 1.8.2 or higher
  • JVM target configured in your multiplatform project
  • IntelliJ IDEA 2025.2.2+ or Android Studio Otter 2025.2.1+ (recommended)

Setup

1

Add the plugin to your version catalog

In gradle/libs.versions.toml, add the Compose Hot Reload plugin:
gradle/libs.versions.toml
[versions]
composeHotReload = "1.1.0"

[plugins]
composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload" }
2

Apply the plugin to your parent project

In your parent project’s build.gradle.kts, add the plugin to prevent it from being loaded multiple times:
build.gradle.kts
plugins {
    alias(libs.plugins.composeHotReload) apply false
}
3

Enable hot reload in your app module

In your application module’s build.gradle.kts, apply the plugin:
app/build.gradle.kts
plugins {
    kotlin("multiplatform")
    kotlin("plugin.compose")
    id("org.jetbrains.compose")
    id("org.jetbrains.compose.hot-reload")
}

compose.desktop {
    application {
        mainClass = "MainKt"
    }
}

kotlin {
    jvm()
    jvmToolchain(21)

    sourceSets.commonMain.dependencies {
        implementation(compose.desktop.currentOs)
        implementation(compose.foundation)
        implementation(compose.material3)
    }
}
4

Configure JetBrains Runtime (optional)

For automatic JetBrains Runtime provisioning, add the Foojay resolver to settings.gradle.kts:
settings.gradle.kts
plugins {
    id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0"
}
If you run hot reload from IntelliJ IDEA or Android Studio with the Kotlin Multiplatform plugin, the IDE’s JetBrains Runtime will be used automatically.
5

Sync your project

Click the Sync Gradle Changes button in your IDE to synchronize the configuration.

Create Your First Hot Reload App

Let’s create a simple counter app to demonstrate hot reload functionality.
1

Create the main entry point

Create Main.kt in your jvmMain source set:
src/jvmMain/kotlin/Main.kt
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

fun main() {
    application {
        Window(
            onCloseRequest = ::exitApplication,
            title = "Hot Reload Demo"
        ) {
            App()
        }
    }
}
2

Create the App composable

Create App.kt with a simple counter UI:
src/jvmMain/kotlin/App.kt
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun App() {
    var counter by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            "Hot Reload Counter",
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold
        )

        Spacer(Modifier.height(24.dp))

        Card {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    "Counter: $counter",
                    fontSize = 24.sp
                )
            }
        }

        Spacer(Modifier.height(16.dp))

        Button(onClick = { counter++ }) {
            Text("Increment", fontSize = 20.sp)
        }
    }
}
3

Run with hot reload

  1. Click the Run icon in the gutter next to your main() function
  2. Select Run ‘jvm’ with Compose Hot Reload
  3. Your application will launch with hot reload enabled
4

Try hot reload

With your app running, make a change to see hot reload in action:
  1. Click the button a few times to increment the counter
  2. Open App.kt and change the button text from "Increment" to "Count Up"
  3. Save the file (Cmd+S / Ctrl+S)
  4. The button text updates instantly while preserving your counter value!
Try changing colors, text, spacing, or adding new UI elements. All changes apply instantly without losing your application state.

Understanding Hot vs Cold State

Compose Hot Reload preserves different types of state differently:
@Composable
fun StateExample() {
    // ❄️ Cold State (UI State)
    // This will reset to initial value on reload
    var uiState by remember { mutableStateOf(0) }

    // 🔥 Hot State (Application State)
    // Use state management libraries like Evas to persist state across reloads
    // See the counter sample in the source repository for examples
}

Reload Modes

Explicit Mode

Default behaviorTrigger reloads manually:
  • Press the keyboard shortcut (configurable in IDE settings)
  • Click the Reload UI button in the floating toolbar
  • Run the reload Gradle task

Auto Mode

Continuous reloadEnable with the --autoReload or --auto flag:
./gradlew :app:hotRunJvm --auto
Changes reload automatically when you save files.

Next Steps

Installation Guide

Learn about advanced configuration and JetBrains Runtime provisioning

View Sample Project

Explore the complete counter sample with hot state management

Troubleshooting

Make sure you’ve:
  • Applied the plugin to your application module
  • Synced Gradle after adding the plugin
  • Configured a JVM target in your multiplatform setup
  • Verify you’ve saved the file (Cmd+S / Ctrl+S)
  • Check that you’re editing the correct source set (jvmMain)
  • For auto mode, ensure you started with the --autoReload flag
  • Install the Kotlin Multiplatform IDE plugin (will use IDE’s JBR)
  • Or add the Foojay resolver plugin to settings.gradle.kts
  • Or enable experimental auto-provisioning with compose.reload.jbr.autoProvisioningEnabled

Build docs developers (and LLMs) love