CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-desktop--desktop-jvm

Compose Multiplatform Desktop JVM support library for building cross-platform desktop applications with declarative UI framework based on Jetpack Compose

—

Pending
Overview
Eval results
Files

ui-tooling.mddocs/

UI Tooling and Preview

Development-time tools for UI preview, testing capabilities, and developer experience enhancements in Compose Multiplatform Desktop.

Preview Annotation

The Preview annotation enables IDE preview functionality for Composable functions.

Preview Annotation API

@Target(AnnotationTarget.FUNCTION)
@Retention(AnnotationRetention.BINARY)
annotation class Preview(
    val name: String = "",
    val group: String = "",
    val apiLevel: Int = -1,
    val widthDp: Int = -1,
    val heightDp: Int = -1,
    val locale: String = "",
    val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    val uiMode: Int = 0,
    val device: String = Devices.DEFAULT
)

object Devices {
    const val DEFAULT = ""
    const val NEXUS_7 = "id:Nexus 7"
    const val NEXUS_7_2013 = "id:Nexus 7 2013"
    const val NEXUS_5 = "id:Nexus 5"
    const val NEXUS_6 = "id:Nexus 6"
    const val NEXUS_9 = "id:Nexus 9"
    const val PIXEL_C = "id:pixel_c"
    const val PIXEL = "id:pixel"
    const val PIXEL_XL = "id:pixel_xl"
    const val PIXEL_2 = "id:pixel_2"
    const val PIXEL_2_XL = "id:pixel_2_xl"
}

Preview Usage Examples

import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.Devices

@Preview(name = "Light Theme")
@Composable
fun DefaultPreview() {
    MyAppTheme {
        MyComponent()
    }
}

@Preview(
    name = "Dark Theme", 
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun DarkPreview() {
    MyAppTheme {
        MyComponent()
    }
}

@Preview(
    name = "Large Font",
    fontScale = 1.5f
)
@Composable
fun LargeFontPreview() {
    MyAppTheme {
        MyComponent()
    }
}

@Preview(
    name = "Custom Size",
    widthDp = 320,
    heightDp = 480,
    showBackground = true
)
@Composable
fun CustomSizePreview() {
    MyAppTheme {
        MyComponent()
    }
}

Multi-Preview Annotations

Create custom preview annotations that combine multiple preview configurations.

MultiPreview Example

@Preview(name = "Light Theme")
@Preview(
    name = "Dark Theme",
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Preview(
    name = "Large Font",
    fontScale = 1.5f
)
annotation class ThemePreview

@ThemePreview
@Composable
fun MyComponentPreview() {
    MyAppTheme {
        MyComponent()
    }
}

UI Testing Support

Desktop-specific testing utilities and frameworks.

UI Test JUnit4

interface ComposeUiTest {
    fun onNode(matcher: SemanticsMatcher): SemanticsNodeInteraction
    fun onAllNodes(matcher: SemanticsMatcher): SemanticsNodeInteractionCollection
    fun onNodeWithText(text: String): SemanticsNodeInteraction
    fun onNodeWithTag(testTag: String): SemanticsNodeInteraction
    fun onNodeWithContentDescription(label: String): SemanticsNodeInteraction
}

@get:Rule
val composeTestRule = createComposeRule()

Test Example

import androidx.compose.ui.test.*
import androidx.compose.ui.test.junit4.createComposeRule
import org.junit.Rule
import org.junit.Test

class MyComponentTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun myTest() {
        composeTestRule.setContent {
            MyComponent()
        }

        composeTestRule.onNodeWithText("Click me")
            .assertIsDisplayed()
            .performClick()

        composeTestRule.onNodeWithText("Clicked!")
            .assertIsDisplayed()
    }
}

Tooling Dependencies

Add UI tooling dependencies to your project:

dependencies {
    // UI tooling for previews
    implementation(compose.uiTooling)
    
    // Preview runtime
    implementation(compose.preview)
    
    // UI tooling preview
    implementation(compose.components.uiToolingPreview)
    
    // Desktop UI testing
    testImplementation(compose.desktop.uiTestJUnit4)
    testImplementation(compose.uiTest)
}

Development Features

Additional development-time features and utilities.

Hot Reload Support

Compose Multiplatform Desktop supports hot reload during development:

// Enable hot reload in development builds
compose.desktop {
    application {
        // Development configuration
        jvmArgs("-Dcompose.dev=true")
    }
}

Debugging Tools

Built-in debugging and inspection capabilities:

// Layout Inspector support
@Composable
fun DebugLayout() {
    // Use layout bounds for debugging
    Box(
        modifier = Modifier
            .background(Color.Red.copy(alpha = 0.1f))
            .padding(8.dp)
    ) {
        MyComponent()
    }
}

Semantic Tree Inspection

Access semantic information for testing and debugging:

@Composable
fun InspectableComponent() {
    Text(
        text = "Hello World",
        modifier = Modifier
            .testTag("greeting_text")
            .semantics {
                contentDescription = "Greeting message"
            }
    )
}

Configuration

Configure UI tooling in your build script:

compose {
    // Enable compose compiler metrics
    kotlinCompilerPluginArgs.add("plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + 
        project.buildDir.absolutePath + "/compose_metrics")
    kotlinCompilerPluginArgs.add("plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + 
        project.buildDir.absolutePath + "/compose_reports")
}

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-desktop--desktop-jvm

docs

desktop-application.md

desktop-components.md

gradle-plugin.md

index.md

resource-management.md

ui-tooling.md

tile.json