preview-lab/me.tbsten.compose.preview.lab.previewlab/PreviewLab/invoke

invoke

@Composable
operator fun invoke(maxWidth: Dp, maxHeight: Dp, modifier: Modifier = Modifier, state: PreviewLabState = defaultState(), isHeaderShow: Boolean = this.defaultIsHeaderShow(), inspectorTabs: List<InspectorTab> = this.defaultInspectorTabs(), isInPreviewLabGalleryCardBody: Boolean = LocalIsInPreviewLabGalleryCardBody.current, contentGraphicsLayer: GraphicsLayer = rememberGraphicsLayer(), content: @Composable PreviewLabScope.() -> Unit)

Convenience overload for single screen size preview.

Use this when you want to test with a specific screen dimension instead of multiple sizes. This is equivalent to calling the main invoke method with a single-item screenSizes list.

@Preview
@Composable
private fun TabletPreview() = PreviewLab(
  state = rememberPreviewLabState(),
  maxWidth = 1024.dp,
  maxHeight = 768.dp
) {
  MyResponsiveComponent()
}
Content copied to clipboard

Parameters

state

PreviewLabState instance to use for this preview

maxWidth

Maximum width constraint for the preview content

maxHeight

Maximum height constraint for the preview content

modifier

Modifier to apply to the PreviewLab container

isHeaderShow

Controls whether the PreviewLab header is visible

content

Preview content within PreviewLabScope

See also

Main invoke method with multiple screen size support

@Composable
open operator fun invoke(modifier: Modifier = Modifier, state: PreviewLabState = defaultState(), screenSizes: List<ScreenSize> = defaultScreenSizes, isHeaderShow: Boolean = this.defaultIsHeaderShow(), inspectorTabs: List<InspectorTab> = this.defaultInspectorTabs(), isInPreviewLabGalleryCardBody: Boolean = LocalIsInPreviewLabGalleryCardBody.current, contentGraphicsLayer: GraphicsLayer = rememberGraphicsLayer(), content: @Composable PreviewLabScope.() -> Unit)

Main entry point for PreviewLab that enables interactive preview development with dynamic controls.

This function wraps your preview content in a full-featured development environment that provides:

  • Interactive field controls for dynamic parameter adjustment

  • Event tracking and debugging capabilities

  • Multi-device screen size testing

  • Visual inspection tools with zoom and pan

  • State persistence across recompositions

Basic Example

@Preview
@Composable
private fun MyButtonPreview() = PreviewLab { // this: PreviewLabScope
  val buttonText by fieldState { StringField("Text", "Click Me!") }
  val buttonColor by fieldState { EnumField<Color>("Color", Color.Blue) }
  val isEnabled by fieldState { BooleanField("Enabled", true) }

  MyButton(
    text = buttonText,
    color = buttonColor,
    enabled = isEnabled,
    onClick = { onEvent("Button clicked", "User tapped the button") }
  )
}
Content copied to clipboard

Advanced Example with Multiple Screen Sizes

@Preview
@Composable
private fun ResponsiveLayoutPreview() = PreviewLab(
  screenSizes = listOf(
    ScreenSize.Phone,
    ScreenSize.Tablet,
    ScreenSize.Desktop
  )
) {
  val itemCount by fieldState { IntField("Item Count", 10) }
  val layoutStyle by fieldState { EnumField<LayoutStyle>("Layout", LayoutStyle.Grid) }

  ResponsiveLayout(
    items = generateItems(itemCount),
    style = layoutStyle,
    onItemClick = { item -> onEvent("Item clicked", "Clicked item: ${item.id}") }
  )
}
Content copied to clipboard

Field Types Available

  • StringField: Text input fields

  • BooleanField: Toggle switches

  • IntField, FloatField, etc.: Numeric input fields

  • EnumField: Dropdown selection from enum values

  • SelectableField: Custom dropdown with builder DSL

  • CombinedField: Combine multiple fields into one

  • Custom fields by extending PreviewLabField

State Management

  • Use fieldState for mutable fields that components can read and write

  • Use fieldValue for read-only configuration parameters

  • All field state is automatically persisted and restored

Event Tracking

  • onEvent(title, description?): Log events with optional details

  • Events show as toast notifications and are logged in the Events tab

  • Useful for tracking user interactions and debugging component behavior

Parameters

state

PreviewLabState instance that manages the preview's configuration and field values. Defaults to a saveable state that persists across recompositions. Override to provide custom state management or sharing state between multiple previews.

screenSizes

List of screen sizes to test the preview content against. The preview will show a screen size selector allowing switching between different device form factors. Must not be empty - use single-element list or the single-size overload for fixed sizing.

Common configurations:

  • ScreenSize.SmartphoneAndDesktops (default): Phone and desktop sizes

  • ScreenSize.AllPresets: All built-in device presets including tablets

  • listOf(ScreenSize.Phone): Single phone size for focused testing

  • Custom list: listOf(ScreenSize(360.dp, 640.dp), ScreenSize(1920.dp, 1080.dp))

modifier

Modifier to apply to the PreviewLab container. Can be used to control size, background, padding, or other layout properties of the entire PreviewLab UI.

isHeaderShow

Controls whether the PreviewLab header is visible for this specific invocation. Defaults to the PreviewLab instance's configured value. When false, hides header controls to provide a cleaner preview view.

inspectorTabs

List of tabs to display in the inspector panel. Defaults to the PreviewLab instance's configured tabs, or InspectorTab.defaults if not configured.

Example usage:

// Default tabs plus custom tab
PreviewLab(inspectorTabs = InspectorTab.defaults + listOf(DebugTab)) {
    MyComponent()
}

// Only custom tabs (no default Fields/Events)
PreviewLab(inspectorTabs = listOf(CustomTab)) {
    MyComponent()
}
Content copied to clipboard
content

Preview content lambda with PreviewLabScope receiver. Within this scope you have access to:

  • fieldState { ... }: Create mutable state fields

  • fieldValue { ... }: Create read-only parameter fields

  • onEvent(title, description?): Log events for tracking and debugging

The content will be rendered within the selected screen size constraints and can use layout modifiers like fillMaxSize() which will be bounded by the selected screen size.

contentGraphicsLayer

GraphicsLayer for capturing screenshots. Defaults to rememberGraphicsLayer().

See also

State management and persistence

Scope providing field and event functions

Device screen size definitions and presets

Throws

if screenSizes is empty

Generated by Dokka
© 2026 Copyright