Does Compose Preview work in `commonMain` source set I have a Preview Composable in `commonMain` but...

# compose

[Vaibhav Jaiswal]

Does Compose Preview work in commonMain source set
I have a Preview Composable in commonMain but the preview window shows this

[Timo Drick]

I think there is a workaround:
"This has worked for me in Intellij / Android Studio in the past for getting previews to work in commonMain https://github.com/eygraber/immich-kmp/tree/master/ui-preview"
So you need to redefine the annotation.

[Timo Drick]

If you want you could also have a look here:
https://github.com/timo-drick/Multiplatform-Preview
this is my CMP implementation of more elaborated previews like Android Studio previews.

[Wout Werkman]

The workaround isn't necessary anymore if you have an Android target. We've added support for Android previews in common code.
If you upgrade to Android Studio Narwhal Canary 10, it should work.

[Timo Drick]

Is there a documentation how to set it up? I was not able to get it running by just adding the preview dependency.

[Timo Drick]

:app:common_ui:jvmMain: Could not find androidx.compose.ui:ui-tooling-preview:.
Required by:
    project :app:common_ui

[Wout Werkman]

You're getting this exception when you try to see the preview in common code?

[Timo Drick]

not just adding the dependency to commonMain

[Timo Drick]

It looks like it is not multiplatform.

[Timo Drick]

Which version do i need?

[Timo Drick]

So when i want to see previews i need the @Preview annotation and this is an external dependency. There exists one for Compose Multiplatform. But as you said now Android Previews are supported of course we need the @Preview annotation from androidx right?

[Vaibhav Jaiswal]

Thanks @Timo Drick, will try this for the time being

[Vaibhav Jaiswal]

I am using this in commonMain and it builds fine

implementation(compose.components.uiToolingPreview)

[Timo Drick]

This is than the jetbrains MP preview annotation right? Without all the parameters?

[Wout Werkman]

Yes, it's quite confusing that multiple preview imports are available. We are working on making this more pleasant: KMT-936.

[Timo Drick]

And also that it is the same annotation name with different functionality.

[Timo Drick]

So the compose multiplatform @Preview annotation is defined as follows:

package org.jetbrains.compose.ui.tooling.preview
public final annotation class Preview public constructor() : kotlin.Annotation {
}

and the androidx one:

package androidx.compose.ui.tooling.preview
annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val widthDp: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)

[Wout Werkman]

Yes, that's a separate issue though. Android can't blindly be copied here. The parameters require a lot more consideration in the context of all platforms. The fact that Android decided to use annotations and the parameters for this, doesn't necessarily mean that it should be copied to KMP as well. I believe there is room for some UX improvements. But no decisions have been made (aside from postponing it for now :) ).

[Timo Drick]

Ok i thought you just use the Android Preview. So it will be a complete new implementation?