Setting up Compose Multiplatform previews

Earlier this year, the new Kotlin Multiplatform IDE plugin was released, with one of the highlighted features being Compose previews for common code, powered by the Android preview tooling. In this blog post, we’ll look at how to set this up in your projects.

As the first step, install the Kotlin Multiplatform IDE plugin. It’s available for both IntelliJ IDEA and Android Studio. When in doubt about versions, use the latest stable release of your IDE of choice.

The plugin is available for macOS at the moment. If you’re on Windows or Linux, take a look at this section below.

We’ll first take a look at how you can create a new project with the KMP wizard that’s already configured correctly, and then we’ll see how you can add previews to an existing project.

Using the wizard

The easiest way to get a project that has working previews is to create a new project with the wizard. This is available on the web but also as part of the IDE tooling now.

• In IntelliJ IDEA, go to File > New > Project, and pick the Kotlin Multiplatform generator.

  

• In Android Studio, go to File > New > New Project, and choose the Kotlin Multiplatform template (you’ll have to scroll down to find it).

  

Make sure that the project you create includes an Android target, as common previews are based on the Android preview system, and won’t be available without an Android target configured.

After the project opens, go to App.kt which already has the App function annotated with @Preview. You should see a split view available (toggle in the top right if it doesn’t open as the split view immediately), where the preview is rendered on the right:

Features like interactive previews or copying the preview as an image are also available, like on Android:

Setting up previews in an existing project

If you have an existing Compose Multiplatform project, you can follow these steps below to get set up. (You can also just copy this configuration from a freshly-generated wizard project, if that’s easier.)

1. Make sure that you have an Android target in your module.

2. Add the uiToolingPreview dependency to commonMain:

   kotlin {
       sourceSets {
           commonMain.dependencies {
               implementation(compose.components.uiToolingPreview)
           }
       }
   }
   

3. Add the compose.uiTooling dependency to your Android debug builds:

   dependencies {
       debugImplementation(compose.uiTooling)
   }
   

4. Create a Composable function with the @Preview annotation in the commonMain source set:

   import org.jetbrains.compose.ui.tooling.preview.Preview
   
   @Preview
   @Composable
   fun HelloWorld() {
       Text("Hello world!")
   }
   

Windows and Linux users

At the time of writing this, the Kotlin Multiplatform IDE plugin is only available for macOS, but that doesn’t mean that you don’t get previews on Windows or Linux!

To get a very comparable setup to what the KMP plugin gives you on macOS, install these plugins:

• Android
• Android Design Tools
• Jetpack Compose
• Compose Multiplatform for Desktop IDE Support
• Native Debugging Support

These, among other features, will also provide the same preview experience as described above.

This section should be invalidated in the near future as Windows and Linux support in the IDE plugin is coming soon.