base on Compose Hot Reload: Make changes to your UI code in a Compose Multiplatform application, and see the results in real time. No restarts required. Compose Hot Reload runs your application on the JetBrains Runtime and intelligently reloads your code whenever it is changed. # <img src="readme-assets/compose-logo.png" alt="drawing" width="30"/> Compose Hot Reload [](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub) [](https://kotlinlang.org/docs/components-stability.html) [](https://search.maven.org/artifact/org.jetbrains.compose.hot-reload/hot-reload-core) [](LICENSE.txt) [](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-hot-reload.html) [](https://kotlinlang.slack.com/messages/compose-desktop/) Build Compose UIs faster and let your creativity flow when designing multiplatform user interfaces. <picture> <source media="(prefers-color-scheme: dark)" srcset="./readme-assets/banner_dark.png"> <img alt="Text changing depending on mode. Light: 'So light!' Dark: 'So dark!'" src="./readme-assets/banner_light.png"> </picture> With Compose Hot Reload, you can make UI code changes in a Compose Multiplatform app and see the results instantly, without needing to restart. The JetBrains Runtime intelligently reloads your code whenever it changes. > [!IMPORTANT] > Compose Hot Reload needs a JVM target in your multiplatform project. We're exploring adding support for > other targets in the future. ## Prerequisites - Kotlin 2.1.20 or higher. - Compose compiler 2.1.20 or higher. - JetBrains Runtime. ## Set up your project There are two ways to add Compose Hot Reload to your project: * [Create a project from scratch in IntelliJ IDEA or Android Studio](#create-a-project-from-scratch) * [Add it as a Gradle plugin to an existing project](#apply-the-gradle-plugin-to-your-project) ### Create a project from scratch Follow the [Kotlin Multiplatform quickstart](https://www.jetbrains.com/help/kotlin-multiplatform-dev/quickstart.html) guide to set up your environment and create a project. Be sure to select the desktop target when you create the project. ### Apply the Gradle plugin to your project 1. 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"} ``` 2. In the `build.gradle.kts` of your parent project, 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. 3. In the `build.gradle.kts` of the subproject containing your multiplatform application, add the following code to your `plugins {}` block: ``` plugins { alias(libs.plugins.composeHotReload) } ``` 4. 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 "1.0.0" } ``` 5. Click the **Sync Gradle Changes** button to synchronize Gradle files: <img alt="Synchronize Gradle files" src="./readme-assets/gradle-sync.png" width="50"> ## Use Compose Hot Reload You can run your application with Compose Hot Reload from inside your IDE or from the CLI by using Gradle tasks. ### From the IDE > [!IMPORTANT] > Currently, only MacOS is supported for running Compose Hot Reload from the gutter in your IDE. We're working on adding support for Windows and Linux. In IntelliJ IDEA or Android Studio, in the gutter, click the **Run** icon of your main function. Select **Run 'composeApp [hotRunJvm]' with Compose Hot Reload (Beta)**. <img alt="Run Compose Hot Reload from gutter" src="./readme-assets/compose-hot-reload-gutter-run.png" width="400"> ### From the CLI #### Run tasks The Compose Hot Reload plugin automatically creates the following tasks to launch the application in 'hot reload mode': - `:hotRunJvm`: For multiplatform projects. The async alternative is `:hotRunJvmAsync`. - `:hotRun`: For Kotlin/JVM projects. The async alternative `:hotRunAsync`. You can run these Gradle tasks from the command line: ```shell ./gradlew :app:hotRunJvm ``` After making changes, save all files to automatically update your app's UI. ##### Custom target name If you define a custom JVM target name, Gradle uses a different task name. For example, if your target name is `desktop`: ```kotlin kotlin { jvm("desktop") } ``` The task name is `:hotRunDesktop`. ##### Command-line arguments Here's a list of all the possible arguments that you can use with the Gradle run tasks: | Argument | Description | Example | |------------------------------------|-----------------------------------------------|---------------------------------------------------------------------------------| | `--mainClass <Main class FQN>` | The main class to run. | `./gradlew :app:hotRunJvm --mainClass com.example.MainKt` | | `--autoReload` <br> `--auto` | Enable automatic reloading. Default: `false`. | `./gradlew :app:hotRunJvm --autoReload` <br> `./gradlew :app:hotRunJvm --auto` | | `--no-autoReload` <br> `--no-auto` | Disable automatic reloading. | `./gradlew :myApp:hotRunJvm --no-auto` <br> `./gradlew :myApp:hotRunJvm --auto` | ##### Configure the main class You can configure the main class directly in your build script instead of passing it as a command-line argument. You can configure it in the Compose Hot Reload task: ```kotlin tasks.withType<ComposeHotRun>().configureEach { mainClass.set("com.example.MainKt") } ``` Or if you use Compose Multiplatform, in the `application {}` block: ```kotlin compose.desktop { application { mainClass = "com.example.MainKt" } } ``` #### Reload tasks > [!WARNING] > You can't run reload tasks with the `--autoReload` or `--auto` command-line argument. The Compose Hot Reload plugin also provides Gradle tasks to recompile **and** reload your application: - `reload`: Reload all, currently running, applications. - `hotReloadJvmMain`: Reload all applications that use the `jvmMain` source set. For example: ```shell ./gradlew :app:reload ``` ## Use developer builds If you want to try the latest changes in Compose Hot Reload, you can use `dev` builds. To use the latest 'dev' builds of Compose Hot Reload, add the `firework` Maven repository in your `settings.gradle.kts` file: ```kotlin pluginManagement { repositories { maven("https://packages.jetbrains.team/maven/p/firework/dev") } } dependencyResolutionManagement { repositories { maven("https://packages.jetbrains.team/maven/p/firework/dev") } } ``` ## FAQ ### I'm developing an Android-only app without Kotlin Mutliplatform. Can I use Compose Hot Reload? Compose Hot Reload is designed to work with Compose Multiplatform. To use Compose Hot Reload with an Android-only project, you need to: - Switch from the Jetpack Compose plugin to the Compose Multiplatform plugin. - Add a separate Gradle module and configure the JVM target according to [the instructions](#apply-the-gradle-plugin-to-your-project). ### My project is a desktop-only app with Compose Multiplatform. Can I use Compose Hot Reload? Yes! However, be aware that you can't start the application via the run button in the gutter ([CMP-3123](https://youtrack.jetbrains.com/issue/CMP-3123)). Instead, use [Gradle tasks](#from-the-cli). ", Assign "at most 3 tags" to the expected json: {"id":"13336","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"