Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)

Compose Multiplatform is a game-changer for sharing UI implementation across Android, iOS, desktop, and web, but things can still get tricky when it comes to previewing those UIs.
Jetpack Compose's tooling in Android Studio is truly powerful, but what about multiplatform Composables? Can we quickly test and visualize our UIs for multiple platforms without constantly switching tools? Are previews really important now that Compose Hot Reload is emerging?

In this talk, we’ll dig into the challenges we can face when working with Compose Multiplatform Previews, from platform quirks to tooling features and shortcomings. I’ll share some practical workarounds to help you stay productive, plus tips for structuring your code to make previewing across platforms smoother. We’ll also take a look at where the tooling is headed and what we can all hope for in the future.

Expect examples and tips you can start using right away. Whether you’re just getting started or you’ve been using Compose Multiplatform for a while, this talk will give you the confidence to work more effectively with Compose Multiplatform Previews.

Transcript

1. @Preview @Composable private fun TitleSlidePreview() { PreviewColumn { TitleSlide() } } @Composable private fun TitleSlide() { Column( modifier = Modifier .fillMaxSize() .paint( painter = painterResource( id = R.drawable.title_image, ), 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 for Working with Compose Multiplatform Previews István Juhos @istvanjuhos.dev
2. @istvanjuhos.dev #mDevCamp Agenda • State of the CMP Preview tooling • Annotation limitations • Custom-built preview tooling • Demo
3. The state of CMP tooling 🛠
4. @istvanjuhos.dev #mDevCamp The state of CMP tooling jetbrains.com/ fl eet
5. @istvanjuhos.dev #mDevCamp The state of CMP tooling 💧 jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
6. @istvanjuhos.dev #mDevCamp The state of CMP tooling 💧 jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
7. @istvanjuhos.dev #mDevCamp The state of CMP tooling 💧 jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
8. @istvanjuhos.dev #mDevCamp The state of CMP tooling 💧 jetbrains.com/ fl eet blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears
9. @istvanjuhos.dev #mDevCamp The state of CMP tooling jetbrains.com/ fl eet
10. @istvanjuhos.dev #mDevCamp The state of CMP tooling 🫸 jetbrains.com/ fl eet
11. @istvanjuhos.dev #mDevCamp The state of CMP tooling Copyright © 2025 JetBrains s.r.o. IntelliJ IDEA and the IntelliJ IDEA logo are trademarks of JetBrains s.r.o. Narwhal 2025.1.1
12. @istvanjuhos.dev #mDevCamp The state of CMP tooling Copyright © 2025 JetBrains s.r.o. IntelliJ IDEA and the IntelliJ IDEA logo are trademarks of JetBrains s.r.o. 2025.1.1 💜
13. @istvanjuhos.dev #mDevCamp
14. @istvanjuhos.dev #mDevCamp Compose Multiplatform for Desktop IDE Support • Basic previews in modules targeting the JVM • it’s already in maintenance mode
15. @istvanjuhos.dev #mDevCamp Compose Multiplatform for Desktop IDE Support plugins.jetbrains.com/plugin/16541-compose-multiplatform-for-desktop-ide-support
16. @istvanjuhos.dev #mDevCamp Kotlin Multiplatform plugin (Beta) • Starting with IDEA 2025.1.1 and AS Narwhal • Only on 🍎 for now, 🪟 and 🐧 coming soon
17. @istvanjuhos.dev #mDevCamp Kotlin Multiplatform plugin (Beta) plugins.jetbrains.com/plugin/14936-kotlin-multiplatform
18. @istvanjuhos.dev #mDevCamp 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/
19. @istvanjuhos.dev #mDevCamp blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
20. @istvanjuhos.dev #mDevCamp blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
21. @istvanjuhos.dev #mDevCamp blog.jetbrains.com/kotlin/2025/05/kotlin-multiplatform-tooling-now-in-intellij-idea-and-android-studio/
22. Preview Annotations 📷
23. Preview Annotations 📷 🤔
24. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview @Composable fun PreviewButton() { AppTheme { Button( onClick = {}, content = { ... }, ) } }
25. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview
26. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview @Preview @Preview
27. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview @Preview @Preview
28. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview @Preview @androidx.compose.ui.tooling.preview.Preview
29. @istvanjuhos.dev #mDevCamp Preview Annotations @Preview @androidx.compose.desktop.ui.tooling.preview.Preview @androidx.compose.ui.tooling.preview.Preview
30. @istvanjuhos.dev #mDevCamp Preview Annotations @org.jetbrains.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @androidx.compose.ui.tooling.preview.Preview
31. @istvanjuhos.dev #mDevCamp androidx.compose.ui.tooling.preview.Preview • To be used in Android source sets • Supported in Android Studio / IDEA via the Android plugin
32. @istvanjuhos.dev #mDevCamp androidx.compose.ui.tooling.preview.Preview • In Android source sets
33. @istvanjuhos.dev #mDevCamp androidx.compose.ui.tooling.preview.Preview • In Android source sets @androidx.compose.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
34. @istvanjuhos.dev #mDevCamp androidx.compose.ui.tooling.preview.Preview • In Android source sets @androidx.compose.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
35. @istvanjuhos.dev #mDevCamp androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets
36. @istvanjuhos.dev #mDevCamp androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
37. @istvanjuhos.dev #mDevCamp androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
38. @istvanjuhos.dev #mDevCamp androidx.compose.desktop.ui.tooling.preview.Preview • In desktop source sets @androidx.compose.desktop.ui.tooling.preview.Preview @Composable fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
39. @istvanjuhos.dev #mDevCamp org.jetbrains.compose.ui.tooling.preview.Preview • Introduced in CMP 1.6.0, initially for Fleet • To usable anywhere where declaring composables is possible • Supported in Android Studio / IDEA via the • Compose Multiplatform for Desktop IDE Support plugin • Kotlin Multiplatform plugin
40. @istvanjuhos.dev #mDevCamp org.jetbrains.compose.ui.tooling.preview.Preview @org.jetbrains.compose.ui.tooling.preview.Preview @Composable private fun PreviewButtons() { AppTheme{ PrimaryButton( ... ) } }
41. @istvanjuhos.dev #mDevCamp Preview Annotations @androidx.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @org.jetbrains.compose.ui.tooling.preview.Preview
42. @istvanjuhos.dev #mDevCamp Preview Annotations @androidx.compose.ui.tooling.preview.Preview @androidx.compose.desktop.ui.tooling.preview.Preview @org.jetbrains.compose.ui.tooling.preview.Preview
43. Compose Preview vs. CMP Preview
44. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set
45. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set @Preview @Composable fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
46. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set @Preview @Composable fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } 🤔
47. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set @androidx.compose.ui.tooling.preview.Preview @Composable fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
48. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set @androidx.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
49. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In an Android source set @androidx.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
50. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( ... val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, ... )
51. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( . val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, . )
52. @istvanjuhos.dev #mDevCamp @androidx.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose Preview vs. CMP Preview • In an Android source set
53. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In a common source set @androidx.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
54. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In a common source set @org.jetbrains.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
55. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In a common source set @org.jetbrains.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
56. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview • In a common source set @org.jetbrains.compose.ui.tooling.preview.Preview( showBackground = true, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
57. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Repeatable annotation class Preview
58. @istvanjuhos.dev #mDevCamp Compose Preview vs. CMP Preview @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Repeatable annotation class Preview No parameters 🙁
59. @istvanjuhos.dev #mDevCamp Which will "win" in the long term? github.com/JetBrains/compose-multiplatform/pull/5319#discussion_r2090788634
60. @istvanjuhos.dev #mDevCamp Which will "win" in the long term? github.com/JetBrains/compose-multiplatform/pull/5319#discussion_r2090788634
61. Build custom preview tools 🪛
62. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PrimaryButton( ... ) } } Let’s build a preview
63. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PrimaryButton( ... ) PrimaryButton( ... ) } } Let’s build a preview
64. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { Column { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build a preview
65. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { Column { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build a preview
66. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { Column { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build a preview
67. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { Column { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
68. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PreviewColumn { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
69. @istvanjuhos.dev #mDevCamp PreviewColumn Let’s build our first preview tool
70. @istvanjuhos.dev #mDevCamp @Composable fun PreviewColumn( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column( modifier = Modifier .background(MaterialTheme.colorScheme.background) .padding(if (paddingEnabled) 8.dp else 0.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { content() } } Let’s build our first preview tool
71. @istvanjuhos.dev #mDevCamp @Composable fun PreviewColumn( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column( modifier = Modifier .background(MaterialTheme.colorScheme.background) .padding(if (paddingEnabled) 8.dp else 0.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { content() } } Let’s build our first preview tool
72. @istvanjuhos.dev #mDevCamp @Composable fun PreviewColumn( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column( modifier = Modifier .background(MaterialTheme.colorScheme.background) .padding(if (paddingEnabled) 8.dp else 0.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { content() } } Let’s build our first preview tool
73. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PreviewColumn { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
74. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PreviewColumn { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
75. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PreviewColumn( paddingEnabled = true ) { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
76. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { AppTheme { PreviewColumn( paddingEnabled = true ) { PrimaryButton( ... ) PrimaryButton( ... ) } } } Let’s build our first preview tool
77. @istvanjuhos.dev #mDevCamp Let’s build another preview tool @PreviewLightDark
78. @istvanjuhos.dev #mDevCamp Let’s build another preview tool @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Preview(name = "Light") @Preview(name = "Dark", uiMode = UI_MODE_NIGHT_YES ... ) annotation class PreviewLightDark
79. @istvanjuhos.dev #mDevCamp @Composable fun PreviewLightDark( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { } Let’s build another preview tool
80. @istvanjuhos.dev #mDevCamp @Composable fun PreviewLightDark( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column { AppTheme(darkTheme = false) { PreviewColumn(paddingEnabled, content) } AppTheme(darkTheme = true) { PreviewColumn(paddingEnabled, content) } } } Let’s build another preview tool
81. @istvanjuhos.dev #mDevCamp @Composable fun PreviewLightDark( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column { AppTheme(darkTheme = false) { PreviewColumn(paddingEnabled, content) } AppTheme(darkTheme = true) { PreviewColumn(paddingEnabled, content) } } } Let’s build another preview tool
82. @istvanjuhos.dev #mDevCamp @Composable fun PreviewLightDark( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column { AppTheme(darkTheme = false) { PreviewColumn(paddingEnabled, content) } AppTheme(darkTheme = true) { PreviewColumn(paddingEnabled, content) } } } Let’s build another preview tool
83. @istvanjuhos.dev #mDevCamp @Composable fun PreviewLightDark( paddingEnabled: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Column { AppTheme(darkTheme = false) { PreviewColumn(paddingEnabled, content) } AppTheme(darkTheme = true) { PreviewColumn(paddingEnabled, content) } } } Let’s build another preview tool
84. @istvanjuhos.dev #mDevCamp PreviewLightDark Let’s build another preview tool
85. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { PreviewLightDark { PrimaryButton( ... ) PrimaryButton( ... ) } } Let’s build another preview tool
86. @istvanjuhos.dev #mDevCamp @Preview @Composable fun PreviewPrimaryButton() { PreviewLightDark { PrimaryButton( ... ) PrimaryButton( ... ) } } Let’s build another preview tool
87. @istvanjuhos.dev #mDevCamp @PreviewLightDark @PreviewScreenSizes @PreviewFontScale @PreviewScreenSizes @PreviewDynamicColors @Preview( name = "Example preview", group = "Example preview group", showBackground = true, backgroundColor = 0xFF_E7ECF4, uiMode = UI_MODE_NIGHT_YES, widthDp = 200, heightDp = 200, fontScale = 2f, showSystemUi = true, device = Devices.DEFAULT, locale = "iw", wallpaper = Wallpapers.NONE, )
88. @istvanjuhos.dev #mDevCamp
89. Override CompositionLocals 🗺
90. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { }
91. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { var isRtl by remember { mutableStateOf(false) } }
92. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { var isRtl by remember { mutableStateOf(false) } ... CompositionLocalProvider( LocalLayoutDirection provides if (isRtl) { LayoutDirection.Rtl } else { LayoutDirection.Ltr }, ) { Column { content() } } }
93. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { ... Column { Switch( checked = isRtl, onCheckedChange = { isRtl = it }, ) content() } }
94. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { ... Column { Switch( checked = isRtl, onCheckedChange = { isRtl = it }, ) content() } }
95. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { ... Column { Switch( checked = isRtl, onCheckedChange = { isRtl = it }, ) content() } }
96. @istvanjuhos.dev #mDevCamp Override CompositionLocals @Composable fun PreviewWithSettings( content: @Composable ColumnScope.() -> Unit, ) { ... Column { Switch( checked = isRtl, onCheckedChange = { isRtl = it }, ) content() } }
97. Preview tooling in action
98. reddit.com/r/SCP/comments/f1xpvi/here_be_dragons/
99. Wrapping up 📦
100. Practical Tips and Tricks for Working with Compose Multiplatform Previews • The CMP preview tooling is evolving quickly • Build custom reusable tools, go as wild as needed • Use the desktop build target to supercharge CMP UI development • Try Compose Hot Reload istvanjuhos.dev István Juhos