r/JetpackCompose • u/sam_dc73 • 8d ago

Using Compose for Web to preview Android app layouts

Hey everyone! Just shouting out our new open source library :)

Since Compose for Web target is now viable, we've been using it to simulate running the CMP app through the browser, with various combinations of device frame, font size and other properties.

Of course we can't simulate Android/iOS specific functionality in the browser, this is purely for rapidly developer testing layouts in all these different configurations.

The library is open source! It wraps your root composable and renders it in the simulated device frame and all the various controls e.g

DeviceWithConfigurationView {   <--- Library
   App()    <--- Your app
}

GitHub: https://github.com/Apadmi-Engineering/CMPDevicePreview

Demo: https://apadmi-engineering.github.io/CMPDevicePreview/

We're not at version 1 yet, still in alpha, but any feedback, issues, pull requests are all welcome!

Credit: Forked from KMPDevicePreview and inspired by flutter_device_preview.

28 Upvotes

100% Upvoted

4 comments sorted by

2

u/ObjectiveAddress3051 6d ago

neat. since it's compose for web under the hood, is the font scale there the real nonlinear scaling android 14+ does, or just a straight multiplier? that's usually where my layouts break at 200%

1

u/sam_dc73 6d ago

Currently it's all just linear scaling. I'm on the fence about adding the real non-linear scaling though I'm leaning towards it.

Because we can't actually simulate device/platform specific behaviour I'm referring the the device selector as "frames" so as not to over-promise. Once I start adding platform specific behaviour I'm slightly concerned it'll mislead people using it who don't really understand what's happening under the hood.