Skip to content
kakaoPublic

About

Your agent finally sees the Compose UI it builds. Jetpack Compose and Compose Multiplatform Previews in your browser, redrawn a second after every save — no Android Studio, no build.

Topics

Resources

Contributing

Stars

99 stars

Watchers

1 watching

Forks

Repository files navigation

 Prevue

Close Android Studio. Your Previews still show.

Your Compose Previews, redrawn in the browser a second after you save.
Your agent sees the same screen.

English | 한국어

build check version license Claude Code Codex Jetpack Compose Compose Multiplatform JDK

Get started →

Prevue in under 30 seconds, on the Pearl sample app. Point at it: clicking the Thai Milk Tea card opens a card beside the picture with DrinkCard, PearlScreen.kt:135, its size, its modifiers and the tree around it. Hot swap: on a board of Previews, one save turns the drink cards into wide rows, a second save changes the colors in Theme.kt to a dark theme, and all 30 Previews redraw each time — layout in 1.2 s, colors in 0.6 s, no Gradle build. Interactive: the live Preview scrolls, Mango Smoothie opens, and picking size L, ice, pearls and a topping redraws the cup with every tap. Every screen: the drink screen goes from 673×841 to a custom width dragged to 897, then iPhone Duo unfolds and folds shut

Point at it, hot swap, interactive and every screen — real renders of Pearl, the sample app in fixtures/pearl.

Your agent says the screen is done, so you open Android Studio and wait for the build to check it. You take a screenshot of what's wrong, explain it, and wait again. The agent writes the code, but you're still its eyes — every loop. Prevue redraws the Preview about a second after each save so the agent sees it for itself, and you step outside the loop and check only the finished screen.

The UI fix loop, before and after, stacked. Top, before Prevue: the developer sits inside the loop, highlighted in orange — the coding agent edits and saves, Android Studio builds and renders the Preview in about four seconds, and the developer looks, takes a screenshot, and explains what's wrong before the agent edits again, every loop. Bottom, with Prevue: the developer stays outside the loop — they hand the coding agent a goal and a reference, the agent edits and saves, Prevue renders a PNG in about a second, and the agent compares it with the reference and loops on its own. When it's done, the developer reviews the same Preview in the browser

Your agent checks its own work

Give it a design — a Figma frame, a screenshot, a mockup — and the agent edits, looks at the redrawn Preview, compares it with the design, and edits again on its own. You confirm the finished screen in your browser.

Make the ForYouScreen header match this screenshot

Matching a mockup with no hands on the viewer. On the left, mockup.png: the Pearl menu screen with a green header. In the middle, the Prevue board showing PearlListPreview, which starts with a blue header, a smaller headline, and the drink grid pressed against the edges. Below it, the agent's terminal. Asked to make PearlListPreview match mockup.png, the agent saves three times — grid padding 8 → 24 dp, the header color back to forest green, the headline 22 → 28 sp — and runs prevue wait after each save, so the board redraws one difference at a time. After the third save the Preview is identical to the mockup and the terminal prints matches mockup.png

Screens that only change when you tap or drag work the same way. The agent switches the Preview into interactive mode, sends touches, and gets the new picture back.

Hot swap

Save, and the Preview redraws in about a second without Gradle. Change only a value — padding, a color, a string — and it takes about 0.2 seconds (Benchmark). Every @Preview in a file is laid out on a board grouped by function and redrawn on every save. The agent and you look at the same board, so "it's done" and "I see it" happen at the same moment.

The board with the Previews of nowinandroid ForYouScreen.kt laid out in groups by function. The header shows the app name, folder, branch, module, and variant, with a check pill on the right. The open files list on the left has ForYouScreen, InterestsScreen, and NewsResourceCard, and each group header shows its count and zoom. Each Preview's name and size sit above its pictureThe board for TalkCard.kt in the commonMain of the KotlinConf app's ui-components module. The header shows KotlinConf with kotlinconf-app, main, app:ui-components, commonMain and debug. In the open files list on the left, SpeakerCard, MainHeader, Kodee and TalkCard each carry the Kotlin Multiplatform mark on their file icon. Two groups, TalkCardLivePreview and TalkCardUpcomingPreview, each show a light and a dark session card for Asynchronous Programming With Kotlin Coroutines with its tags, speakers, room and time, and the name and size of each sit above the card

Left: Now in Android (Apache-2.0) · Right: KotlinConf app, Compose Multiplatform (Apache-2.0)

Kotlin Multiplatform and Compose Multiplatform modules work the same way. Prevue draws their commonMain Previews from the module's Android compilation, as Android Studio does, so modules that also target iOS or the web are fine. Compose Multiplatform resources (Res) draw as they do in the app.

Switch between a screen file and its component files while you edit, and the open files stay in the list on the left. / or ⌘K finds a file by name, initials (fys → ForYouScreen.kt), or Preview function name. Press ? in the viewer for every shortcut.

Point instead of explaining

Click anything in the Preview and tell your agent what to do with it. No screenshots, no "the second card from the top."

Tighten the padding on this

The agent reads "this" as a file and line. @path#Lline is also copied to your clipboard, so you can paste it into a terminal.

A card opens beside the picture with what you pointed at: its name, its file:line, its size and its modifiers, plus a small tree of the elements around it. Click a row to point at a parent or a sibling, or jump to a Preview that calls it.

A board of Pearl app previews. Clicking beside the price on the Taro Milk Tea card in the home preview opens a card next to the picture: Column, DrinkCard.kt:106, 150.1 × 174.5 dp, fillMaxSize, and a tree of the elements around it. Clicking the DrinkCard row above it points at the whole drink card, the next DrinkCard row moves to Thai Milk Tea, and the Preview button in the card's header lists the three previews that call DrinkCard; choosing MenuCardsPreview opens the board of ComponentPreviews.kt at that preview

Interactive mode

Press a card's ▶ to open it large. Like Android Studio's Interactive Mode, click and drag to check motion and animations. Without touching the source, change the screen size or the device (six Android, four iPhone), turn it to Portrait, Landscape left or Landscape right, and fold or unfold foldables.

  • Real device insets reach your Composable, from windowinsets.info and safearea.info.
  • Show inset areas draws each inset band and the safe area over the picture.
  • Each device draws its own system UI — Android, iOS and iPhone Duo status bars, in the browser only.

Changing devices from the control dock under the workspace stage with Show inset areas left on throughout. S26 tints its 37 dp top band and 15 dp bottom band and labels the SAFE AREA between them, 360 × 728. Picking iPhone 17 redraws the screen inside its 62 dp and 34 dp bands, 402 × 778. Picking iPhone Duo and folding it right away lands on the cover screen with an 84 dp band beside the camera, 382 × 644, and unfolding splits the cup and options panel inside 867 × 635. Picking S26 again returns to the first frameIn the workspace, with the control dock under the stage, tapping the Taro Milk Tea card grows the card to fill the screen while the cup flies separately into its spot on the detail screen. Add to bag sends the cup flying into the bag at the top right and the badge pops, and the back arrow plays it in reverse back to the cardIn the workspace, with the control dock under the stage, on the detail screen Ice Extra opens the lid and drops ice in so the drink rises, Pearls Extra pours pearls in a curve, and None flings them off screen. Dragging the cup side to side sloshes the drink, and Sweetness 0% and 100% make its color lighter and then deeper

Three agents, still light

One Preview in Android Studio keeps a Gradle daemon and a Kotlin daemon running too, about 8GB. We gave three agents a worktree each on a 36GB Mac, and the three Android Studios started swapping until every task slowed to a crawl.

With Prevue, every worktree gets its own lightweight daemon, each using 83% less memory than Android Studio (Benchmark). Even when two agents save at the same time, each window redraws on its own, and when only one saves again, the other stays put.

Two Chrome windows for two worktrees of the same repository, each with its own daemon and its own address (main and feature/big-cards) and a terminal strip for the agent working there. Both agents save at the same time — the left changes the header color to purple, the right changes the headline to Big cards, big sips — and each window redraws on its own with the prevue wait result printed below. Then only the left saves again, turning the header orange, and the right window stays as it was

Get started

Requirements

  • macOS with the Command Line Tools (python3) — if they're missing, the agent opens the installer for you.
  • Java — with Android Studio Ladybug (2024.2) or newer installed, there's nothing to set up, even if your project uses JDK 17.
    • Older Android Studio releases bring Java 17, which the preview server can't run on.
    • Without Android Studio, install JDK 21 or later. brew install openjdk@25 needs no sudo, and Prevue finds it there (or under Library/Java/JavaVirtualMachines or SDKMAN) by itself. 25 or later starts about a second faster.
    • Set PREVUE_JDK only to pick a different one.
  • Android SDK — with at least one platform. Set ANDROID_HOME if it isn't at ~/Library/Android/sdk.

Install

# Claude Code
claude plugin marketplace add https://github.com/kakao/prevue.git
claude plugin install prevue@prevue

# Codex
codex plugin marketplace add https://github.com/kakao/prevue.git
codex plugin add prevue@prevue

Then tell your agent the file name. Calling the skill directly is more reliable: /prevue in Claude Code, $prevue:prevue in Codex.

Show the Previews in ForYouScreen.kt

Kotlin Multiplatform and Compose Multiplatform projects work the same way: name a file in commonMain.

There's nothing to configure. The first time you run it, the agent does the setup it needs, checking with you as it goes. When it's done, your browser opens with every @Preview in that file. Prevue doesn't change your project's build files, plugins, or tasks, and it doesn't add files to your project. Gradle runs only once per module; after that, even edits to shared modules redraw right away.

Update

Refresh the marketplace info first, then update the plugin. If you skip this step, it reads the old version info and says it is already up to date.

# Claude Code — takes effect after a restart or /reload-plugins
claude plugin marketplace update prevue
claude plugin update prevue@prevue

# Codex — there is no update, so run add again
codex plugin marketplace upgrade
codex plugin add prevue@prevue

Changes are in CHANGELOG.md. If you get stuck, ask your agent to read prevue log. If that doesn't help, let us know in an issue.

Supported

Works Doesn't work
Android modules (app · library) Pure JVM modules
Kotlin Multiplatform · Compose Multiplatform modules with an Android target — AGP 9's com.android.kotlin.multiplatform.library, or kotlin.multiplatform with com.android.library KMP modules without an Android target, and builds other than Gradle, such as Amper
Saving a commonMain file redraws it without Gradle Files with expect · actual declarations — after a save, the old picture stays until a Gradle build
Debug-type variants. Picked by Android Studio's default Build Variants rules; ask your agent for another Release variants
Top-level @Preview functions. Multipreview and @PreviewParameter are expanded too Member Previews declared inside a class
Composables that draw without a real device Previews that need a DI container or AndroidView — shown with the failure kinds DI · ANDROID_VIEW

Benchmark

Top, the same work in Android Studio and in Prevue. Bottom, how fast each kind of change shows up.

Android Studio vs Prevue on nowinandroid ForYouScreen.kt — Hot Swap 4.3s vs 2.1s (−51%), First Preview 12.1s vs 8.0s (−34%), Memory 8.1GB vs 1.4GB (−83%), Disk 3.2GB vs 446MB (−86%)

How fast Prevue redraws — literal edit 0.23s, resource value 0.22s, code edit 0.90s, whole board 2.07s, switch module 0.33s, change device 0.92s, and about 54 fps while dragging

  • Setup — Apple Silicon, 14 cores · 36GB RAM · nowinandroid ForYouScreen.kt (25 Previews). Android Studio 2026.1.3 was measured on 2026-09-22 and Prevue (develop feb5c6e) on 2026-10-23. Prevue values are medians
  • Hot Swap — From save until all 25 show the new picture. The first one appears at 0.9 seconds
  • First Preview — Android Studio from opening the project, Prevue from starting the daemon, until the first render finishes
  • Memory — Android Studio is the IDE plus the Gradle daemon at one moment; Prevue is the memory use of its one daemon after 10 saves. Going back and forth between modules for a long time, it peaked at 1.6GB, and it shuts itself down after 10 minutes without use
  • Disk — The Android Studio app bundle vs ~/.prevue/toolchain. With JDK 25 or later Prevue also keeps a class cache of about 200MB in ~/.prevue/aot that makes the daemon start faster
  • How fast Prevue redraws — Literal and resource-value saves skip compilation. Switching modules and changing devices are measured until the new picture is ready. Interactive is the frame rate on the viewer stream while dragging a feed

Commands

These are commands the agent calls, so you rarely type them. The executable is bin/prevue in the directory where the plugin is installed. See every command and exit code with prevue --help, and each command with prevue <command> --help. Four are worth typing yourself.

Command What it does
prevue open Reopens a closed viewer in the browser
prevue stop Stops the daemon started in that repository (--all stops every running one)
prevue log The daemon log — ask your agent to read it when you're stuck
prevue paths Where the toolchain, dumps, and outputs live and how much space they take — for finding what to delete

License

This software is licensed under the Apache 2 license, quoted below.

Copyright 2026 Kakao Corp. http://www.kakaocorp.com

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this project except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

Your agent finally sees the Compose UI it builds. Jetpack Compose and Compose Multiplatform Previews in your browser, redrawn a second after every save — no Android Studio, no build.

Topics

Resources

Contributing

Stars

99 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages