Blazing Fast UI Development with Compose Hot Reload (droidcon Berlin 2025)

When working on UI, you want to see the results of your code changes as fast as possible. Waiting for apps to rebuild and relaunch, then getting the app to the desired state again only gets in your way.

Compose Hot Reload is a new JetBrains project that gives you live updates after code changes when running a Compose app on desktop - so you can see and feel how your app’s behaviour changes, without having to relaunch it at all. And you even get to keep your existing state!

In this talk, we’ll experience coding with Compose Hot Reload enabled with exciting live demos, and also learn a bit about how it all works under the hood.

If your project doesn’t have a desktop target yet… it might just be time to add one!

https://zsmb.co/talks/blazing-fast-compose-hot-reload/

Transcript

1. Márton Braun Developer Advocate Blazing Fast UI Development with
2. Demo
3. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-beta08" }
4. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-beta08" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" }
5. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-beta08" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
6. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-beta08" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
7. How does it work? Your app’s code Java Runtime Gradle
8. How does it work? Your app’s code JetBrains Runtime Gradle
9. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-beta08" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
10. How does it work? Your app’s code JetBrains Runtime Gradle
11. How does it work? Your app’s code JetBrains Runtime Gradle Hot Reload Agent Recompiler
12. How does it work? Your app’s code JetBrains Runtime Hot Reload Agent Gradle Supervisor process
13. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent
14. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler
15. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler
16. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler DCEVM
17. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler
18. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler
19. How does it work? Supervisor process Your app’s code JetBrains Runtime Hot Reload Agent Dev Tooling IDE Recompiler
20. DCEVM Dynamic Code Evolution Virtual Machine class Offset( val x: Int, ) Current Class Loader
21. DCEVM class Offset( val x: Int, val y: Int, ) Dynamic Code Evolution Virtual Machine Side Universe Class Loader class Offset( val x: Int, ) Current Class Loader
22. DCEVM class Offset( val x: Int, val y: Int, ) Dynamic Code Evolution Virtual Machine Current Class Loader
23. What do you mean… “migrate objects”?
24. DCEVM Dynamic Code Evolution Virtual Machine Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, )
25. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, )
26. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, val y: Int, ) +
27. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 class Offset( val x: Int, val y: Int, ) +
28. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head class Offset( val x: Int, val y: Int, ) +
29. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head 0 0 class Offset( val x: Int, val y: Int, ) +
30. DCEVM Dynamic Code Evolution Virtual Machine Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head 0 0 class Offset( val x: Int, val y: Int, ) +
31. Compose diffing fun mediumPadding() = 16.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } }
32. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
33. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
34. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
35. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
36. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
37. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a wonderful counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
38. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a wonderful counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
39. Demo
40. jb.gg/chr
41. Yes, you’ll need a desktop target.
42. Android app iOS app Compose Multiplatform UI ViewModels Data layer
43. Desktop app Android app iOS app Compose Multiplatform UI ViewModels Data layer
44. Desktop app* Android app iOS app Compose Multiplatform UI ViewModels Data layer Fake data layer
45. Gallery app Android app iOS app Compose Multiplatform UI ViewModels Data layer
49. zsmb.co/talks Márton Braun @zsmb.co Compose Hot Reload jb.gg/chr KotlinConf app jb.gg/kc-app Sebastian Sellmair’s content KotlinConf talk jb.gg/kc25-chr YouTube youtube.com/@s.sellmair Blog blog.sellmair.io Blazing Fast UI Development with