Enables in-IDE preview of user interfaces across different platforms, enhancing cross-platform development efficiency by providing real-time visualization and adjustments without leaving the development environment.
HotPreview is a preview system for Compose Multiplatform UI code. Unlike Android Studio's preview system which is limited to Android code only, HotPreview is implemented from scratch specifically for multiplatform development. It allows developers to visualize their Compose UI components. With features like custom device configurations, screen sizes, font scaling, locale and dark mode. HotPreview makes multiplatform UI development faster and more efficient.
The HotPreview system is developed as a IntelliJ plugin using Jewel. It also previews itself. If you want to use it as well in your Jewel plugin projects please see the setup guide here: Jewel plugin development
IntelliJ release notes are here: RELEASE_NOTES_PLUGIN.md Release notes for the HotPreview annotation dependency are here: https://github.com/timo-drick/Multiplatform-Preview/releases
Supported projects:
This is because the previews are rendered using CFD itself.
Supported IDEs:
dependencies {
implementation("de.drick.compose:hotpreview:<current version>")
}
In a multiplatform project you need to add the jvm target to your module:
kotlin {
jvm() // add this line
// or
jvm("desktop") // if you have a custom name for the jvm target
// more targets
sourceSets {
//...
}
}
You also need the plugin. It is published already to the marketplace so just search for HotPreview.
https://plugins.jetbrains.com/plugin/26327-compose-multiplatform-hotpreview
If you want to compile it yourself please see documentation in the intellij project: intellij-plugin
In your code use the @HotPreview annotation to create previews.
@HotPreview
@Composable
fun PreviewHomeScreen() {
MyTheme {
HomeScreen()
}
}
Device configuration can also be set and you can provide multiple annotations:
@HotPreview(
name = "phone", group = "light", widthDp = 400, heightDp = 800,
fontScale = 1.5f, darkMode = false, density = 1f
)
@HotPreview(
name = "phone dark", group = "dark", widthDp = 1000, heightDp = 800,
fontScale = 1f, density = 1f
)
@Composable
fun PreviewHomeScreen() {
MyTheme {
HomeScreen()
}
}
Or use the gutter icon to change the parameters:
HotPreview provides several built-in annotation classes that combine multiple @HotPreview annotations for common use cases:
You can use HotPreviewParameterProvider to provide mock data for your previews. This allows you to test your composable with different data sets without creating multiple preview functions.
To use this feature:
HotPreviewParameterProvider<T> where T is the type of data you want to provide:class WeatherProvider : HotPreviewParameterProvider<Weather> {
override val values: Sequence<Weather> = weatherForecast.asSequence()
}
@HotPreviewParameter annotation on a parameter in your preview function:@HotPreview(widthDp = 200, heightDp = 200)
@Composable
private fun PreviewWeatherCanvas(
@HotPreviewParameter(WeatherProvider::class) weather: Weather
) {
WeatherCanvas(
modifier = Modifier.fillMaxSize(),
seconds = 20.0,
weather = weather,
)
}
The plugin will use the values provided by your HotPreviewParameterProvider to generate previews with different data.
You can simulate window insets in your previews. This allows you to test how your UI behaves with different insets, such as status bars or navigation bars. Please read the official documentation for details: https://developer.android.com/develop/ui/compose/system/insets
There is an annotation class which does simulate most of the common WindowInsets configurations:
@HotPreviewWindowInsets
Or you could specify it yourself using the @HotPreview annotation:
@HotPreview(
name = "Phone with insets",
widthDp = 400,
heightDp = 800,
displayCutout = DisplayCutoutMode.CameraTop,
statusBar = true,
navigationBar = NavigationBarMode.GestureBottom,
)
@Composable
private fun PreviewHomeScreenWithInsets() {
MyTheme {
MyComposableHandlingInsets()
}
}
If you are using Coil 3 for multiplatform image loading and want to provide a preview image just have a look at the official documentation of coil here: https://coil-kt.github.io/coil/compose/#previews Of course, it depends on you code how to integrate this into previews. You could also use this approach: https://coil-kt.github.io/coil/compose/#compose-multiplatform-resources
But both ways do work in HotPreview previews.
Here is a sample project using the @HotPreview annotation: https://github.com/timo-drick/compose_desktop_dev_challenge
// Use any of the built-in annotation classes
fun PreviewHomeScreen() {
MyTheme {
HomeScreen()
}
}
// Create your own custom annotation class
annotation class MyCustomPreviews
// Usage
fun PreviewWithCustomSettings() {
MyTheme {
HomeScreen()
}
}
Surfaced from shared tags and platforms — no rankings paid for.