PreviewWrapper

Annotation used to associate a PreviewWrapperProvider with a Composable.

When a preview is rendered, Android Studio looks for this annotation to determine if the preview content should be wrapped in a custom container (e.g., for Remote Compose or custom theming).

Scope and Precedence

This annotation is not repeatable. Each preview rendered uses at most one wrapper. The wrapper is applied to all Previews associated with this function, including direct @Preview annotations and MultiPreview annotations.

Examples

1. Basic Usage

class SampleScaffoldWrapper : PreviewWrapperProvider {
    @Composable
    override fun Wrap(content: @Composable () -> Unit) {
        // Wrap the content in a Material3 Scaffold to provide a standard app structure
        MaterialTheme {
            Scaffold { padding ->
                Box(Modifier.padding(padding)) { content() }
            }
        }
    }
}

@Preview
@Composable
@PreviewWrapper(wrapper = SampleScaffoldWrapper::class)
fun PreviewWrapperSample() {
    // Your component content here
}

2. Usage with MultiPreview

@Preview(name = "Small", fontScale = 0.8f)
@Preview(name = "Large", fontScale = 1.2f)
annotation class FontPreviews

@FontPreviews
@Composable
@PreviewWrapper(wrapper = SampleScaffoldWrapper::class)
fun PreviewWrapperMultiPreviewSample() {
    // Your component content here
}

3. Combining Multiple Wrappers

Since PreviewWrapper allows only a single wrapper, you can create a composite wrapper to apply multiple effects.

class ThemeWrapper : PreviewWrapperProvider {
    @Composable
    override fun Wrap(content: @Composable () -> Unit) {
        content()
    }
}

class RemoteComposeWrapper : PreviewWrapperProvider {
    @Composable
    override fun Wrap(content: @Composable () -> Unit) {
        content()
    }
}

class ThemeAndRemoteWrapper : PreviewWrapperProvider {
    private val themeWrapper = ThemeWrapper()
    private val remoteWrapper = RemoteComposeWrapper()

    @Composable
    override fun Wrap(content: @Composable () -> Unit) {
        // Nest the wrappers: Theme is usually the outermost layer,
        // followed by the environment/container wrapper.
        themeWrapper.Wrap { remoteWrapper.Wrap { content() } }
    }
}

@Preview
@Composable
@PreviewWrapper(wrapper = ThemeAndRemoteWrapper::class)
fun PreviewWrapperCompositeSample() {
    // Your component content here
}

Summary

Public constructors
Cmn

Public properties
KClass<PreviewWrapperProvider>

The KClass of the PreviewWrapperProvider implementation to use.
Cmn

Public constructors

PreviewWrapper

Cmn
Added in 1.11.0
PreviewWrapper(wrapper: KClass<PreviewWrapperProvider>)
Parameters
wrapper: KClass<PreviewWrapperProvider>

The KClass of the PreviewWrapperProvider implementation to use. Must have a default zero-argument constructor.

Public properties

wrapper

Cmn 
val wrapper: KClass<PreviewWrapperProvider>

The KClass of the PreviewWrapperProvider implementation to use. Must have a default zero-argument constructor.