Jetpack Compose Preview is now available in Code on the Go — and it runs entirely on your Android device.
If you’ve been building Android UI with Jetpack Compose, you already know it’s a fundamentally better way to build interfaces: declarative, elegant, and fast. But for developers who work on the go, there has always been a catch: you couldn’t see your work without a full desktop setup.
The gap we kept hearing about
When you’re writing Compose UI, previewing matters. A lot. The fast loop of write → see → adjust is the difference between flow and frustration.
On desktop IDEs, @Preview renders your composable right next to your editor. On a phone or tablet with Code on the Go, you didn’t have that. To check padding, spacing, truncation, etc., you built and ran the entire app. Without previews, every tiny tweak meant a full build cycle. Sometimes dozens per screen. It would break flow and kill experimentation.
This wasn’t a minor inconvenience. It was a big gap between Code on the Go and a desktop IDE. Code on the Go could already build and run apps, write Kotlin, manage Gradle, and debug with logcat. But lack of a quick preview loop meant long wait times through each build-and-install cycle. That’s not development; it’s a bottleneck. We wanted to fix that.
Introducing Live Compose Preview
Code on the Go now supports live Jetpack Compose previews directly on your Android device. Open any Kotlin file containing @Composable functions, tap the Preview button in the toolbar, and see your UI rendered in real-time. Edit your code, and the preview updates automatically. It’s the desktop workflow you love, running entirely in your hand.
This isn’t a mock or static screenshot. We run a full Kotlin→DEX→Compose rendering pipeline locally on your device, using the same Compose compiler plugin, runtime, and rendering fidelity you’d get on a laptop or workstation. That fast feedback loop of “write, see, adjust” now works on your phone. Wherever you are.
What you can do with it
- Live auto-updating preview: Code changes re-render after you pause typing (debounced to save CPU).
- Multiple previews: See all @Preview composables in a scrollable grid view, or switch to single-preview mode and pick from a dropdown.
- Preview parameters: Dimensions like @Preview(heightDp = 400, widthDp = 300) are honored, with sensible defaults (e.g., 600dp max height) for smaller screens.
- Clear error feedback: Full diagnostics with file, line, column, and error text.
- Smart caching: Previews are cached via a SHA‑256 of your source; unchanged previews load instantly.
How it works under the hood (a deeper dive)
- Kotlin Compilation: Your .kt file compiles via kotlinc-jvm with the Jetpack Compose compiler plugin. Output: JVM .class files. We run the compiler as a separate process with a five-minute timeout for large files.
- DEX Compilation: We convert .class files to classes.dex with D8 targeting min API 21. The classpath includes Compose runtime libraries and Android framework deps so your composables can resolve the full API surface.
- Dynamic Loading & Rendering: A DexClassLoader loads the freshly compiled DEX alongside your project’s artifacts and the Compose runtime. We reflectively locate @Composable entry points (including generated wrappers), then render each one into a live ComposeView.
- Multi-File Resolution: If your composable references classes from other files, we resolve your module/variant/classpath against existing build artifacts. If they don’t exist yet, the preview prompts you to run a project build first.
- Classpath Management: A classpath manager extracts and caches the Compose library JARs bundled with the app for both compilation stages (type resolution in Kotlin and dependency inclusion in D8).
- Optional Compiler Daemon: For repeated compilations, an optional daemon stays warm to avoid JVM startup overhead, with an idle timeout so it doesn’t linger.
Using it in practice
- Open any Kotlin file with @Composable or @Preview functions.
- Tap the Preview icon in the toolbar. Your composables compile and render automatically.
- Edit your code. The preview refreshes after a brief pause.
- Toggle between All Previews (grid) and Single Preview (dropdown) as needed.
If your project hasn’t been built yet (multi-file references, etc.), the preview will prompt you to trigger a build so everything resolves correctly.
Why this matters for mobile‑first development
You no longer need a laptop to design Compose UI. Prototype on your commute. Iterate between meetings. Experiment freely because seeing the result takes seconds, not minutes. Your phone becomes a legitimate Compose development environment, with the same toolchain and rendering fidelity you’d expect on a desktop.
We’re continuing to improve compilation speed and broaden support for more complex preview scenarios. Let us know what you think; your feedback helps shape our own “compose loop.” Now go build something beautiful!
