A Year of Compose Multiplatform Preview Tooling Improvements - We're Almost There*!

Not so long ago, working with Compose Multiplatform previews could feel… character-building. Previewing composables from common code often meant jumping through awkward hoops. On top of that, the tooling was lacking in features that Jetpack Compose tooling already had in place for a while.

Over the past year, that’s changed drastically. We've got a new KMP plugin, CMP preview support in common code, Hot Reload, and a lot more refreshing updates.

Join me on this journey to review the advancements made regarding Compose Multiplatform previews in 2025 so far and to have a glimpse at what's yet to come!

Transcript

1. A Year of Compose Multiplatform Preview Tooling Improvements We're Almost There*! István Juhos @istvanjuhos.dev
2. Previously
3. Previously on DevFest Venezia...
4. @Preview(device = "spec:width=960dp,height=1080dp,dpi=480") @Composable private fun TitleSlidePreview() { PreviewBox { TitleSlide() } } @Composable private fun TitleSlide() { Column( modifier = Modifier .fillMaxSize() .paint( painter = painterResource( id = R.drawable.glenn_carstens_peters, ), contentScale = ContentScale.FillBounds, ) .padding(32.dp) ) { Title( modifier = Modifier .fillMaxWidth() .padding(top = 32.dp), fontSize = 70.sp, ) Column( horizontalAlignment = CenterHorizontally, modifier = Modifier .fillMaxWidth() ) { Name( modifier = Modifier .weight(1f) .padding(bottom = 66.dp), imageHeight = 66.dp, textSize = 70.sp, ) Contacts( modifier = Modifier .padding( bottom = 16.dp, end = 16.dp, ), fontSize = 50.sp, ) } } } Practical Tips and Tricks to Improve Your Compose Previews István Juhos @istvanjuhos.dev
5. @istvanjuhos.dev #DevFestVenezia Agenda • Developer experience • Annotation limitations • Custom tooling • Interactive previews
6. @istvanjuhos.dev #DevFestVenezia No Preview annotation parameters org.jetbrain s​ .compose.ui.tooling.preview @Preview (​ ) 😢 ❌
7. @istvanjuhos.dev #DevFestVenezia No multipreview support yet @Preview @Preview annotation class PreviewPrimaryBackground @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes @PreviewDynamicColors 😢 ❌
8. @istvanjuhos.dev #DevFestVenezia @PreviewLightDark @Composable private fun PrimaryButtonPreview() { AppTheme { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {}, ) } } Missing flexibility 💧 🫸
9. @istvanjuhos.dev #DevFestVenezia Make previews interactive ❌ ✅
10. The improvement timeline November
11. Compose Hot Reload ( 🎆 ) November
12. Compose Hot Reload ( 🎆 ) December
13. December blog.sellmair.io/say-hello-to-compose-hot-reload- fi rework Compose Hot Reload ( 🎆 )
14. Kotlin Multiplatform Tooling Shifting Gears February
15. @istvanjuhos.dev #DevFestVenezia February Kotlin Multiplatform Tooling - Shifting Gears jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
16. @istvanjuhos.dev #DevFestVenezia February Kotlin Multiplatform Tooling - Shifting Gears jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
17. @istvanjuhos.dev #DevFestVenezia February Kotlin Multiplatform Tooling - Shifting Gears jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
18. @istvanjuhos.dev #DevFestVenezia February Kotlin Multiplatform Tooling - Shifting Gears jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
19. @istvanjuhos.dev #DevFestVenezia Kotlin Multiplatform Tooling - Shifting Gears February May
20. @istvanjuhos.dev #DevFestVenezia Kotlin Multiplatform Tooling - Shifting Gears 🫸 February May
21. @istvanjuhos.dev #DevFestVenezia Kotlin Multiplatform Tooling - Shifting Gears Narwhal 2025.1.1 February May
22. Kotlin Multiplatform Tooling - Shifting Gears 2025.1.1 💜 February May
23. Kotlin Multiplatform Tooling - Shifting Gears 2025.1.1 💜 February May
24. Compose Hot Reload hits alpha01 March May
25. KotlinConf'25 May
26. KotlinConf'25 May
27. KotlinConf'25 May
28. Plugins 🔌 May
29. Compose Multiplatform for Desktop IDE Support • Basic previews in modules targeting the JVM • Entered maintenance mode, phasing out May
30. Compose Multiplatform for Desktop IDE Support plugins.jetbrains.com/plugin/16541-compose-multiplatform-for-desktop-ide-support May
31. Kotlin Multiplatform plugin (Beta) • Starting with IDEA 2025.1.1 and AS Narwhal • Only on 🍎 at fi rst May
32. May Kotlin Multiplatform plugin (Beta) plugins.jetbrains.com/plugin/14936-kotlin-multiplatform
33. May Kotlin Multiplatform plugin (Beta) blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/ blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
34. May Kotlin Multiplatform plugin (Beta) blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
35. May Kotlin Multiplatform plugin (Beta) • Starting with IDEA 2025.1.1 and AS Narwhal • Only on 🍎 for now, 🪟 and 🐧 coming soon • Intro blog post blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
36. May Kotlin Multiplatform plugin (Beta) • Starting with IDEA 2025.1.1 and AS Narwhal • Only on 🍎 for now, 🪟 and 🐧 coming soon • Intro blog post blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
37. Preview Annotations 📷 May
38. Preview Annotations 📷 🤔 May
39. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview @Composable fun PreviewButtons() { AppTheme { PrimaryButton( ... ) } } May
40. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview May
41. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview @Preview @Preview May
42. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview @Preview @Preview May
43. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview @Preview @androidx.compose.ui.tooling.preview.Preview May
44. @istvanjuhos.dev #DevFestVenezia Preview Annotations @Preview @androidx.compose.desktop.ui.tooling.preview.Preview @androidx.compose.ui.tooling.preview.Preview May
45. @istvanjuhos.dev #DevFestVenezia Preview Annotations @org.jetbrains.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @androidx.compose.ui.tooling.preview.Preview May
46. @istvanjuhos.dev #DevFestVenezia androidx.compose.ui.tooling.preview.Preview • To be used in Android source sets • Supported in Android Studio / IDEA via the Android plugin May
47. @istvanjuhos.dev #DevFestVenezia androidx.compose.ui.tooling.preview.Preview • In Android source sets
48. @istvanjuhos.dev #DevFestVenezia androidx.compose.ui.tooling.preview.Preview • In Android source sets @androidx.compose.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
49. @istvanjuhos.dev #DevFestVenezia androidx.compose.ui.tooling.preview.Preview • In Android source sets @androidx.compose.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
50. @istvanjuhos.dev #DevFestVenezia androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets May
51. @istvanjuhos.dev #DevFestVenezia androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme { PrimaryButton( ... ) } } May
52. @istvanjuhos.dev #DevFestVenezia androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme { PrimaryButton( ... ) } } May
53. @istvanjuhos.dev #DevFestVenezia May androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme { PrimaryButton( ... ) } }
54. @istvanjuhos.dev #DevFestVenezia org.jetbrains.compose.ui.tooling.preview.Preview • Introduced in CMP 1.6.0, initially for Fleet • Usable anywhere where declaring composables is possible • Supported in Android Studio and IDEA via the • Compose Multiplatform for Desktop IDE Support plugin • Kotlin Multiplatform plugin May
55. @istvanjuhos.dev #DevFestVenezia org.jetbrains.compose.ui.tooling.preview.Preview • In common source sets @org.jetbrains.compose.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme { PrimaryButton( ... ) } } May
56. @istvanjuhos.dev #DevFestVenezia Preview Annotations @androidx.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @org.jetbrains.compose.ui.tooling.preview.Preview May
57. @istvanjuhos.dev #DevFestVenezia Preview Annotations @androidx.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @org.jetbrains.compose.ui.tooling.preview.Preview May
58. July
59. CMP 1.9.0-beta01 @Preview parameters added July
60. Preview annotation parameters jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-190.html
61. Preview annotation parameters jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-190.html
62. Preview annotation parameters jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-190.html
63. Preview annotation parameters android x​ .compose.ui.tooling.preview @Preview( ...​ ) ✅ 2025-09
64. Preview annotation parameters ✅ org.jetbrain s​ .compose.ui.tooling.preview @Preview( ...​ ) CMP 1.9-beta01+ 2025-09
65. @istvanjuhos.dev #DevFestVenezia Preview annotation parameters android x​ .compose.ui.tooling.preview org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "", group = "", widthDp = 300, heightDp = 200, locale = "it_IT", showBackground = true, backgroundColor = 0xFFE7ECF4, showSystemUi = true, fontScale = 1f, apiLevel = 35, uiMode = UI_MODE_NIGHT_YES, device = PIXEL_9_PRO_FOLD, wallpaper = GREEN_DOMINATED_EXAMPLE, ) @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "it_IT", showBackground = true, backgroundColor = 0xFFFFFF, ) July
66. @istvanjuhos.dev #DevFestVenezia Preview annotation parameters android x​ .compose.ui.tooling.preview org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "", group = "", widthDp = 300, heightDp = 200, locale = "it_IT", showBackground = true, backgroundColor = 0xFFE7ECF4, showSystemUi = true, fontScale = 1f, apiLevel = 35, uiMode = UI_MODE_NIGHT_YES, device = PIXEL_9_PRO_FOLD, wallpaper = GREEN_DOMINATED_EXAMPLE, ) @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "it_IT", showBackground = true, backgroundColor = 0xFFFFFF, ) July
67. @istvanjuhos.dev #DevFestVenezia Preview annotation parameters android x​ .compose.ui.tooling.preview org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "", group = "", widthDp = 300, heightDp = 200, locale = "it_IT", showBackground = true, backgroundColor = 0xFFE7ECF4, showSystemUi = true, fontScale = 1f, apiLevel = 35, uiMode = UI_MODE_NIGHT_YES, device = PIXEL_9_PRO_FOLD, wallpaper = GREEN_DOMINATED_EXAMPLE, ) @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "it_IT", showBackground = true, backgroundColor = 0xFFFFFF, ) July
68. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview July
69. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview @Preview July
70. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview @Preview 🤔 July
71. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP CMP 1.9-beta01+ org.jetbrain s​ .compose.ui.tooling.preview @Preview July
72. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "Example preview name", group = "Example preview group", showBackground = true, backgroundColor = GRAY_W500, widthDp = 1080, heightDp = 1920, locale = "it_IT", ) CMP 1.9-beta01+ July
73. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "Example preview name", group = "Example preview group", showBackground = true, backgroundColor = GRAY_W500, widthDp = 1080, heightDp = 1920, locale = "it_IT", ) CMP 1.9-beta01+ July
74. @istvanjuhos.dev #DevFestVenezia Multipreview support with CMP org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "Example preview name", group = "Example preview group", showBackground = true, backgroundColor = GRAY_W500, widthDp = 1080, heightDp = 1920, locale = "it_IT", ) CMP 1.9-beta01+ July
75. @istvanjuhos.dev #DevFestVenezia Multipreview examples - MultiLocalePreview @Preview( name = "Greek", group = "Locale", locale = "el", ) ... @Preview( name = "Portuguese", group = "Locale", locale = "pt", ) @Preview( name = "Arabic", group = "Locale", locale = "ar", ) @Preview( name = "(Default locale)", group = "Locale", ) annotation class MultiLocalePreview
76. @istvanjuhos.dev #DevFestVenezia Preview annotation parameters android x​ .compose.ui.tooling.preview org.jetbrain s​ .compose.ui.tooling.preview @Preview( name = "", group = "", widthDp = 300, heightDp = 200, locale = "it_IT", showBackground = true, backgroundColor = 0xFFE7ECF4, showSystemUi = true, fontScale = 1f, apiLevel = 35, uiMode = UI_MODE_NIGHT_YES, device = PIXEL_9_PRO_FOLD, wallpaper = GREEN_DOMINATED_EXAMPLE, ) @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "it_IT", showBackground = true, backgroundColor = 0xFFFFFF, ) July
77. Compose Hot Reload 🔥 Reaches RC stage! October
78. Compose Hot Reload 🔥 Reaches RC stage! October
79. CMP 1.10.0-alpha02 Reduce Preview annotation variety October
80. CMP 1.10.0-alpha02 - Reduce Preview annotation variety • Using @androidx.compose.ui.tooling.preview.Preview in common code • Eventually deprecating and removing the rest October
81. CMP 1.10.0-alpha02 - Reduce Preview annotation variety • Using @androidx.compose.ui.tooling.preview.Preview in common code • Eventually deprecating and removing the rest October
82. 1.10.0-alpha02 - Consolidating Preview annotations October • Using @androidx.compose.ui.tooling.preview.Preview in common code • Eventually deprecating and removing the rest
83. @istvanjuhos.dev #DevFestVenezia A Year of Compose Multiplatform Preview Tooling Improvements We're Almost There*!
84. @istvanjuhos.dev #DevFestVenezia A Year of Compose Multiplatform Preview Tooling Improvements We're Almost There*!
85. @istvanjuhos.dev #DevFestVenezia A Year of Compose Multiplatform Preview Tooling Improvements We're Almost There*! Where?
86. Where? • No more jumping through hoops to have proper CMP Previews • CMP Previews working in common code like in a pure Android project • Same behavior in IDEA and AS 😎
87. @istvanjuhos.dev #DevFestVenezia Slides 🛝🛝 speakerdeck.com/stewemetal
88. Grazie per l'attenzione! István Juhos @istvanjuhos.dev