Live preview rendering for Jetpack Compose and Compose Multiplatform @Preview
functions — directly in VS Code, without Android Studio.
How it works
The extension drives the
ee.schimke.composeai.preview
Gradle plugin through the Tooling API. The plugin scans compiled classes for
@Preview annotations (including transitive multi-preview meta-annotations),
renders them to PNG, and the extension loads those PNGs into a webview.
Android projects render inside a Robolectric sandbox with native
graphics.
Compose Multiplatform Desktop projects render with ImageComposeScene
and Skia.
Gradle 9.4.1+ (the bundled wrapper in your project is fine).
The
Gradle for Java
extension (installed automatically as a dependency).
CMP Desktop projects additionally need
implementation(compose.components.uiToolingPreview) — the bundled
@Preview annotation has SOURCE retention and is otherwise invisible to
the discovery step.
Usage
Open a Kotlin project that applies the Compose Preview Gradle plugin.
Click the Compose Preview icon in the activity bar.
Use the Previews panel to browse discovered @Preview functions and
their rendered images.
Commands
Command
Description
Compose Preview: Refresh Previews
Re-read previews.json and rendered PNGs from build/compose-previews/.
Compose Preview: Render All Previews
Run the renderAllPreviews Gradle task to discover and render everything.
Settings
Setting
Default
Description
composePreview.variant
debug
Build variant to use for preview rendering (Android).
