# PreviewWrapper

Artifact: [androidx.compose.ui:ui-tooling-preview](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/tooling/preview/PreviewWrapper.kt+class:androidx.compose.ui.tooling.preview.PreviewWrapper) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.11.0) Common/All
- Cmn

  ```
  @MustBeDocumented
  @Retention(value = AnnotationRetention.BINARY)
  @Target(allowedTargets = [AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION])
  annotation PreviewWrapper
  ```

*** ** * ** ***

Annotation used to associate a `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview`s associated with this function, including direct `@Preview` annotations and MultiPreview annotations.

**Examples**

**1. Basic Usage**

```kotlin
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**

```kotlin
@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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapper` allows only a single wrapper, you can create a composite wrapper to apply multiple effects.

```kotlin
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 |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapper#PreviewWrapper(kotlin.reflect.KClass)(wrapper: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html<https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider>)` | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html<https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider>` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapper#wrapper()` The `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider` implementation to use. | Cmn |

## Public constructors

### PreviewWrapper

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.11.0)

```
PreviewWrapper(wrapper: KClass<PreviewWrapperProvider>)
```

| Parameters |
|---|---|
| `wrapper: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html<https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider>` | The `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider` implementation to use. Must have a default zero-argument constructor. |

## Public properties

### wrapper

Cmn

```
val wrapper: KClass<PreviewWrapperProvider>
```

The `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/PreviewWrapperProvider` implementation to use. Must have a default zero-argument constructor.