Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms with Kotlin. It is based on Jetpack Compose and developed by JetBrains and open-source contributors.
You can choose the platforms across which to share your UIs using Compose Multiplatform:
iOS (Beta) Android Desktop (Windows, MacOS, Linux) Web (Alpha)
For example, you can share UIs between iOS and Android or Windows and MacOS.
iOS support is in Beta. It is feature complete, and migration issues should be minimal. You may still encounter bugs, performance and developer experience issues, but not as much as in the Alpha stage.
Compose Multiplatform shares most of its API with Jetpack Compose, the Android UI framework developed by Google. You can use the same APIs to build user interfaces for both Android and iOS.
When Android is one of your targets, you can get the same experience for Android as if you were developing an Android app using Jetpack Compose.
Compose Multiplatform targets the JVM and supports high-performance hardware-accelerated UI rendering on all major desktop platforms – macOS, Windows, and Linux.
Web support is in Alpha. It may change incompatibly and require manual migration in the future.
You can experiment with sharing your mobile or desktop UIs with the web. Compose for Web is based on Kotlin, the newest target for Kotlin Multiplatform projects. It allows Kotlin developers to run their code in the browser with all the benefits that WebAssembly has to offer, such as good and predictable performance for your applications.
Compose HTML
Compose HTML is a library targeting Kotlin/JS that provides Composable building blocks for creating web user interfaces with HTML and CSS.
While KMP and CMP were created and managed by JetBrains, Google announced at Google I/O 2024 that it will officially support the platform, ensuring the tools get first-class attention going forward.
Prerequisites:
- Mac System
- Latest JDK installed
- Android Studio(Latest Version)
- Xcode
- Cocopods
To make sure you have all the prerequisite
- Open Terminal
- Execute Command -
kdoctor
Result
Android Studio prerequisite:
- Open Android Studio
- Install following plugins
iOS Simulator Setup in Android Studio
Following is configuration to setup iOS device simulator setup
While Android Studio has a new project wizard, it uses native UI code at the moment, not Compose for all. Instead, go to https://kmp.jetbrains.com/. The project in this post includes all the front-end options, but you’re welcome to select the options you would like for yours and continue following along.
Download the project and open it into Android Studio.
Project Structure in Android Studio.
Visual Guide of folder structure
