Compose Desktop Previewer

Composable preview in Compose Desktop + IntelliJ is very limited and kinda sucks, right?

Let's fix that, right now!

Features

• Support for custom themes and any way you use to customise your app theme.
• DSL for creating previews.
• Sugar-coated functions for creating light and dark previews at once with no boilerplate.
• Modern UI for previews.
• Show borders and debug information for the previewed view in the preview area.
• Gradle plugin to make previews work automatically by adding an annotation to the existing @Preview-annotated composable.

Usage

1. Follow the steps on JitPack to add it to your dependencies.

2. Create a wrapper Composable that will set up your own theme for the preview via the wrapperBlock:

   @Composable
   fun AppThemePreviewer(content: PreviewerScope.() -> Unit) {
       Previewer(wrapperBlock = { wrappedContent ->
           // The `previewTheme` property is accessible via the PreviewScope
           // The `wrapperBlock` function will wrap every preview created with this Previewer composable
           
           AppTheme(isDarkModeOverride = previewTheme.isDark) {
               wrappedContent()
           }
       }, content = content)
   }

3. Create a composable function annotated with @Preview, where you will use the DSL to create the various previews:

   @Preview
   @Composable
   fun MyPreview() {
       AppThemePreviewer {
           previewLightAndDark("My button preview") {
               MyComposable()
           }
   
           preview {
               MyComposable()
           }
   
           previewLightAndDark("Radio button") {
               CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onBackground) {
                   RadioButtonWithLabel("This is a test radio", true, onClick = {})
               }
           }
       }
   }

Screenshots

License

See the LICENSE file.