Additional UI components for Compose Multiplatform including SplitPane layouts, resource loading, animated images, and UI tooling preview support
—
Development-time preview support with parameter providers for IDE integration and composable function previewing during development, enabling rapid UI iteration and testing.
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 PreviewUsage 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)
}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")
}
}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)
}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")
}
}
}class BooleanProvider : PreviewParameterProvider<Boolean> {
override val values = sequenceOf(true, false)
}
@Preview
@Composable
fun TogglePreview(
@PreviewParameter(BooleanProvider::class) isEnabled: Boolean
) {
Switch(
checked = isEnabled,
onCheckedChange = { }
)
}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)
)
}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)
)
}
}// 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")
}
}@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
@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"))
}@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) { }
}Preview functions appear in compatible IDEs with visual previews:
Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-compose-components--components