CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-components--components

Additional UI components for Compose Multiplatform including SplitPane layouts, resource loading, animated images, and UI tooling preview support

Pending
Overview
Eval results
Files

preview.mddocs/

UI Tooling Preview

Development-time preview support with parameter providers for IDE integration and composable function previewing during development, enabling rapid UI iteration and testing.

Capabilities

Preview Annotation

Mark composable functions or annotation classes for IDE preview rendering.

/**
 * Marks a composable function for IDE preview or creates a custom preview annotation
 * Can be applied to @Composable functions directly or to annotation classes for reusable preview configurations
 * Supports @Repeatable for multiple preview variations of the same composable
 */
@Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION)
@Repeatable
annotation class Preview

Usage Examples:

import org.jetbrains.compose.ui.tooling.preview.*

// Basic preview
@Preview
@Composable
fun WelcomeScreenPreview() {
    WelcomeScreen()
}

// Multiple previews for the same composable
@Preview
@Composable
fun ButtonPreview() {
    MyButton("Click me")
}

@Preview
@Composable
fun ButtonDisabledPreview() {
    MyButton("Disabled", enabled = false)
}

Custom Preview Annotations

Create reusable preview configurations using annotation classes.

// Define a custom preview annotation
@Preview
@Target(AnnotationTarget.FUNCTION)
annotation class DarkModePreview

@Preview
@Target(AnnotationTarget.FUNCTION)
annotation class LightModePreview

// Use custom preview annotations
@DarkModePreview
@Composable
fun CardDarkPreview() {
    DarkTheme {
        MyCard("Dark mode card")
    }
}

@LightModePreview
@Composable
fun CardLightPreview() {
    LightTheme {
        MyCard("Light mode card")
    }
}

Preview Parameters

Provide dynamic data to preview functions using parameter providers.

/**
 * Injects parameter values into preview functions using a provider class
 * @param provider KClass that implements PreviewParameterProvider<T>
 * @param limit Maximum number of parameter values to use (default: unlimited)
 */
@Target(AnnotationTarget.VALUE_PARAMETER)
annotation class PreviewParameter(
    val provider: KClass<out PreviewParameterProvider<*>>,
    val limit: Int = Int.MAX_VALUE
)

Usage Examples:

// Define a parameter provider
class UserDataProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("John Doe", "john@example.com"),
        User("Jane Smith", "jane@example.com"),
        User("Bob Johnson", "bob@example.com")
    )
}

// Use parameter provider in preview
@Preview
@Composable
fun UserCardPreview(
    @PreviewParameter(UserDataProvider::class, limit = 2) user: User
) {
    UserCard(user)
}

Preview Parameter Provider Interface

Interface for creating parameter providers that supply data to preview functions.

/**
 * Interface for providing parameter values to preview functions
 * @param T Type of parameter values provided
 */
expect interface PreviewParameterProvider<T> {
    /** Sequence of parameter values to provide to the preview function */
    val values: Sequence<T>
    
    /** Number of parameter values available (optional, defaults to values.count()) */
    val count: Int
}

Implementation Examples:

// Simple data provider
class ColorProvider : PreviewParameterProvider<Color> {
    override val values = sequenceOf(
        Color.Red,
        Color.Green, 
        Color.Blue,
        Color.Yellow
    )
}

// Complex data provider with calculated count
class ThemeDataProvider : PreviewParameterProvider<ThemeData> {
    override val values = sequenceOf(
        ThemeData("Light", Color.White, Color.Black),
        ThemeData("Dark", Color.Black, Color.White),
        ThemeData("Blue", Color.Blue, Color.White)
    )
    
    override val count: Int = 3
}

// Data class for theme data
data class ThemeData(
    val name: String,
    val backgroundColor: Color,
    val textColor: Color
)

// Preview using theme provider
@Preview
@Composable
fun ThemedButtonPreview(
    @PreviewParameter(ThemeDataProvider::class) theme: ThemeData
) {
    Surface(color = theme.backgroundColor) {
        Button(
            onClick = { },
            colors = ButtonDefaults.buttonColors(
                contentColor = theme.textColor
            )
        ) {
            Text("Button - ${theme.name} Theme")
        }
    }
}

Advanced Preview Patterns

Boolean Parameter Provider

class BooleanProvider : PreviewParameterProvider<Boolean> {
    override val values = sequenceOf(true, false)
}

@Preview
@Composable
fun TogglePreview(
    @PreviewParameter(BooleanProvider::class) isEnabled: Boolean
) {
    Switch(
        checked = isEnabled,
        onCheckedChange = { }
    )
}

Size Variations Provider

class SizeProvider : PreviewParameterProvider<Dp> {
    override val values = sequenceOf(
        24.dp, 32.dp, 48.dp, 64.dp
    )
}

@Preview
@Composable
fun IconSizePreview(
    @PreviewParameter(SizeProvider::class) size: Dp
) {
    Icon(
        Icons.Default.Star,
        contentDescription = "Star",
        modifier = Modifier.size(size)
    )
}

Text Content Provider

class TextContentProvider : PreviewParameterProvider<String> {
    override val values = sequenceOf(
        "Short",
        "Medium length text",
        "Very long text that might wrap to multiple lines and test text overflow behavior"
    )
}

@Preview
@Composable
fun TextCardPreview(
    @PreviewParameter(TextContentProvider::class) text: String
) {
    Card(
        modifier = Modifier.width(200.dp)
    ) {
        Text(
            text = text,
            modifier = Modifier.padding(16.dp)
        )
    }
}

Complex Data Providers

// User state provider
enum class UserState { LOADING, LOGGED_IN, LOGGED_OUT, ERROR }

class UserStateProvider : PreviewParameterProvider<UserState> {
    override val values = UserState.values().asSequence()
}

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserStateProvider::class) state: UserState
) {
    when (state) {
        UserState.LOADING -> LoadingScreen()
        UserState.LOGGED_IN -> ProfileScreen(sampleUser)
        UserState.LOGGED_OUT -> LoginScreen()
        UserState.ERROR -> ErrorScreen("Failed to load profile")
    }
}

Multiple Parameter Providers

@Preview
@Composable
fun ComplexPreview(
    @PreviewParameter(ColorProvider::class) backgroundColor: Color,
    @PreviewParameter(BooleanProvider::class, limit = 1) isDarkMode: Boolean
) {
    Surface(
        color = backgroundColor,
        modifier = Modifier.size(100.dp)
    ) {
        Text(
            text = if (isDarkMode) "Dark" else "Light",
            color = if (isDarkMode) Color.White else Color.Black,
            modifier = Modifier.padding(16.dp)
        )
    }
}

Preview Best Practices

Meaningful Preview Names

@Preview
@Composable
fun ProductCard_EmptyState_Preview() {
    ProductCard(product = null)
}

@Preview
@Composable
fun ProductCard_WithLongTitle_Preview() {
    ProductCard(product = Product(title = "Very Long Product Title That Might Wrap"))
}

State Variations

@Preview
@Composable
fun LoadingButton_Enabled_Preview() {
    LoadingButton(isLoading = false, enabled = true) { }
}

@Preview
@Composable
fun LoadingButton_Loading_Preview() {
    LoadingButton(isLoading = true, enabled = false) { }
}

@Preview
@Composable
fun LoadingButton_Disabled_Preview() {
    LoadingButton(isLoading = false, enabled = false) { }
}

IDE Integration

Preview functions appear in compatible IDEs with visual previews:

  • Android Studio: Full preview support with interactive mode
  • IntelliJ IDEA: Preview rendering for Compose Multiplatform
  • Other IDEs: Basic preview support where available

Development Workflow

  1. Create Composables: Build your UI components
  2. Add Previews: Create preview functions to visualize components
  3. Use Parameters: Test different states and data variations
  4. Iterate Rapidly: Make changes and see results immediately in preview
  5. Test Edge Cases: Use parameter providers to test various scenarios

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-components--components

docs

animatedimage.md

index.md

preview.md

resources.md

splitpane.md

tile.json