Remote Compose builder
A visual scratchpad for Jetpack Remote Compose. Build a tree, copy the Kotlin.
I wrote about why this matters here: Compose Remote: rethinking server-driven UI on Android.
What is Remote Compose?
Remote Compose lets a server stream Compose-style UI documents to an Android client. The runtime renders them natively, no app update required.
This builder covers the basics (Column, Row, Text, Button, Spacer, Image, plus remoteStateOf) and prints the Kotlin you would write by hand. Useful if you have never set up a document before.
Example output
Loading the Feature card template produces something like this:
captureSingleRemoteDocument {
Column(modifier = RemoteModifier.fillMaxWidth().padding(16.dp)) {
Image(url = "https://placehold.co/200", modifier = RemoteModifier.size(width = 200.dp, height = 120.dp))
Text("Feature title", fontSize = 18.sp)
Text("Short description of the feature.", fontSize = 14.sp)
Spacer(modifier = RemoteModifier.size(16.dp))
Button(onClick = RemoteAction.navigate("details")) {
Text("Learn more")
}
}
}FAQ
What is Remote Compose?
Remote Compose is an Android library from Google that lets a server send Compose-style UI documents to an Android client and have them render natively. It's a way to ship dynamic UI without shipping new app versions.
What does this builder actually do?
It gives you a visual tree of components (Column, Row, Text, Button, Spacer, Image, plus remoteStateOf for state) and generates the Kotlin code you would put inside a captureSingleRemoteDocument { } block. Copy it into your Android project as a starting point.
Is the preview accurate?
No. The preview is a CSS approximation so you can see roughly what the layout will look like. The real rendering happens on an Android device using the Remote Compose runtime.
Why would I use this instead of writing Kotlin directly?
Mostly to learn the API. If you have never written a Remote Compose document before, scaffolding one visually and reading the generated code is faster than reading the docs cold.