{"id":22790683,"url":"https://github.com/huanshankeji/compose-multiplatform-html-unified","last_synced_at":"2025-04-16T02:58:51.347Z","repository":{"id":65507815,"uuid":"570509992","full_name":"huanshankeji/compose-multiplatform-html-unified","owner":"huanshankeji","description":"Unified Compose Multiplatform wrappers of common and Material Design APIs for rendering-based Compose UI and DOM-based Compose HTML","archived":false,"fork":false,"pushed_at":"2024-12-04T09:48:29.000Z","size":1385,"stargazers_count":17,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-04T10:32:29.557Z","etag":null,"topics":["compose-android","compose-desktop","compose-html","compose-ios","compose-multiplatform","compose-ui","compose-wasm","compose-web","jetbrains-compose","jetpack-compose","kobweb","kotlin-js","material-3","material-components","material-components-web","material-design","mdc-web","multiplatform-compose"],"latest_commit_sha":null,"homepage":"https://huanshankeji.github.io/compose-multiplatform-material/","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huanshankeji.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-25T11:10:50.000Z","updated_at":"2024-12-04T09:48:33.000Z","dependencies_parsed_at":"2023-11-12T11:28:30.298Z","dependency_job_id":"9ccade6d-ac12-455f-839d-8f4bd7862a25","html_url":"https://github.com/huanshankeji/compose-multiplatform-html-unified","commit_stats":null,"previous_names":["huanshankeji/compose-multiplatform-html-unified"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanshankeji%2Fcompose-multiplatform-html-unified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanshankeji%2Fcompose-multiplatform-html-unified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanshankeji%2Fcompose-multiplatform-html-unified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanshankeji%2Fcompose-multiplatform-html-unified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huanshankeji","download_url":"https://codeload.github.com/huanshankeji/compose-multiplatform-html-unified/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249188204,"owners_count":21227010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compose-android","compose-desktop","compose-html","compose-ios","compose-multiplatform","compose-ui","compose-wasm","compose-web","jetbrains-compose","jetpack-compose","kobweb","kotlin-js","material-3","material-components","material-components-web","material-design","mdc-web","multiplatform-compose"],"created_at":"2024-12-12T02:28:32.689Z","updated_at":"2025-04-16T02:58:51.339Z","avatar_url":"https://github.com/huanshankeji.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compose Multiplatform HTML Unified\n\n[![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-html-unified-common)](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-html-unified-*)\n![Kotlin version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=com.huanshankeji\u0026name=compose-multiplatform-html-unified-common)\n\nUnified Compose Multiplatform wrappers of common and **Material Design** APIs for **rendering-based Compose UI** (officially supported on Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and **DOM-based Compose HTML**\n\nThis library was previously named \"Compose Multiplatform Material\".\n\n## The scope and implementations of the APIs provided\n\nWe try to provide a set of common APIs including composable component APIs akin to those in `androidx.compose` (`androidx.compose.foundation`, `androidx.compose.material`, and `androidx.compose.material3`), meanwhile making them compatible with the Compose HTML APIs. However, only subsets of the composables and composable parameters are supported due to the underlying API differences, limitations of the JS platform and the available Compose HTML composables this project depends on, and our limited effort.\n\nThe modules of this library correspond to the Compose Multiplatform modules (or Compose modules in AndroidX) that are not available for Compose HTML, aka those that depend on [the UI module](https://github.com/JetBrains/compose-multiplatform-core/tree/jb-main/compose/ui), more specifically [`ui-graphics`](https://github.com/JetBrains/compose-multiplatform-core/tree/jb-main/compose/ui/ui-graphics). The `common` module of this library corresponds to the `ui` and `foundation` modules, offering UI components (including layouts), modifiers, UI configuration classes, etc.\n\nThe Compose HTML / JS DOM source is mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) [Compose](https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose), [KMDC](https://github.com/mpetuska/kmdc), and [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) (which is then based on [Material Web](https://github.com/material-components/material-web)).\n\n## References and limitations\n\nComplete visual consistency across different platforms is not guaranteed. See [the side-by-side demo site](https://huanshankeji.github.io/compose-multiplatform-html-unified/) for the visual effects and their differences.\n\nThis project is still in development and has not reached a stable state. Some APIs are subject to change and there is no detailed documentation yet. Check out [the demo project source](demo) on how to use the components in addition to the sections below.\n\n## Supported API catalog\n\n### Components\n\n#### Foundation components\n\n- `BasicText`\n\n##### `ext` components\n\n- `TaglessBasicText`\n\n##### Layouts\n\n- `Box` (based on Kobweb)\n- `Column` (via flexbox on JS, based on Kobweb)\n- `Row` (via flexbox on JS, based on Kobweb)\n- `Spacer`\n\n###### `ext` layouts\n\n- `BoxWithConstraints`\n\n##### Lazy\n\n- `LazyColumn` (via flexbox on JS, based on Kobweb)\n- `LazyRow` (via flexbox on JS, based on Kobweb)\n\n#### Material 2 components\n\n- `Button`\n- `Card`\n- `Checkbox`\n- `Divider` (not working properly on JS yet)\n- `Icon`\n- `IconButton`\n- `Snackbar` (inconsistent, not recommended), `SnackBarHost` (recommended)\n- `Switch`\n- `Text`\n\n##### `ext` components\n\n- `Button`\n- `IconButton`\n- `RadioRow`, `RadioGroupRow`\n- `SwitchWithLabel`\n- `MaterialText`, `TaglessText`\n- `TextField`, `OutlinedTextField`\n- `TopAppBarScaffold`\n\n##### `lazy.ext` components\n\n- `List`/`LazyColumnList` (visually inconsistent for now)\n\n#### Material 3 components\n\n- `Button` (`FilledButton`), `ElevatedButton`, `FilledTonalButton`, `OutlinedButton`, `TextButton`\n- `Card` (`FilledCard`), `ElevatedCard`, `OutlinedCard`\n- `Checkbox`\n- `FloatingActionButton`, `SmallFloatingActionButton`, `LargeFloatingActionButton`, `ExtendedFloatingActionButton`\n- `Icon`\n- `IconButton`, `IconToggleButton`, `FilledIconButton`, `FilledIconToggleButton`, `FilledTonalIconButton`, `FilledTonalIconToggleButton`, `OutlinedIconButton`, `OutlinedIconToggleButton`\n- `LinearProgressIndicator`, `CircularProgressIndicator`\n- `Switch`\n- `Text`\n\n##### `ext` components\n\n- `Button` (`FilledButton`), `ElevatedButton`, `FilledTonalButton`, `OutlinedButton`, `TextButton`\n- `Card` (`FilledCard`), `ElevatedCard`, `OutlinedCard`\n- `DropdownMenu`, `DropdownMenuItem`\n  - `ExposedDropdownMenuBox`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenu`, `ExposedDropdownMenuWithTextField`\n- `FloatingActionButton`, `SmallFloatingActionButton`, `LargeFloatingActionButton`, `ExtendedFloatingActionButton`\n- `IconButton`, `IconToggleButton`, `FilledIconButton`, `FilledIconToggleButton`, `FilledTonalIconButton`, `FilledTonalIconToggleButton`, `OutlinedIconButton`, `OutlinedIconToggleButton`\n- `NavigationBar`, `NavigationBarItem`\n- `MaterialText`, `TaglessText`\n- `TextField`, `OutlinedTextField`\n\n##### `lazy.ext` components\n\n- `List`/`LazyColumnList` (slightly visually inconsistent)\n\n#### About `ext` components (components in the `ext` packages)\n\nThe components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers that are more idiomatic and conventional on both kinds of targets, wrapping different APIs that can't be unified following the `androidx.compose` APIs.\n\n#### About parameter names\n\nThe parameter names with suffixes such as \"JsDom\" or \"ComposeUi\" are platform-specific, and only apply on their respective platform(s), Compose HTML / JS DOM or Compose UI platforms.\n\n#### Material Icons\n\nThe `com.huanshankeji.compose.material.icons.Icon` class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in `com.huanshankeji.compose.material.icons` to use the icons you need. Track the progress of full icon support in [#4](/../../issues/4).\n\n### Modifiers\n\n- `alpha`\n- size modifiers\n  - `size`, `sizeIn`, `fillMaxSize`\n  - `width`, `widthIn`, `fillMaxWidth`\n  - `height`, `heightIn`, `fillMaxHeight`\n- `padding`\n- `background`\n- `border` (visually inconsistent)\n- `onClick`\n- `verticalScroll`, `horizontalScroll` (`ScrollState` not supported on JS yet)\n\n#### `ext` modifiers\n\n- `outerBorder`\n- `roundedCornerBackgroundAndOuterBorder`\n- `outerPadding`, `innerPadding`\n\n### Other APIs\n\n- `Alignment`\n- `Arrangement`\n- `KeyboardOptions`\n- `KeyboardActions`\n- `PaddingValues`\n\n### ViewModel\n\nThe ViewModel module currently supports a subset of the Compose ViewModel APIs. For ViewModel to work properly on Compose HTML / JS DOM, call `com.huanshankeji.compose.ui.window.renderComposableInBodyWithViewModelStoreOwner` instead of `org.jetbrains.compose.web.renderComposableInBody` on JS. These APIs are experimental now.\n\n### Navigation\n\nThe navigation module currently supports a small subset of the Compose Navigation APIs, which does not support transition or animation on Compose HTML / JS DOM. These APIs are also experimental now. See [CMP-4966](https://youtrack.jetbrains.com/issue/CMP-4966) for a bug to avoid.\n\n## Add to your dependencies\n\nMaven coordinate:\n\n```kotlin\n\"com.huanshankeji:compose-multiplatform-html-unified-$module:$version\"\n```\n\nMore specifically:\n\n```kotlin\n\"com.huanshankeji:compose-multiplatform-html-unified-common:$version\"\n\"com.huanshankeji:compose-multiplatform-html-unified-material-icons-core:$version\"\n\"com.huanshankeji:compose-multiplatform-html-unified-material2:$version\"\n\"com.huanshankeji:compose-multiplatform-html-unified-material3:$version\"\n```\n\nFor example, to depend on the Material 3 module with Gradle:\n\n```kotlin\nkotlin {\n    sourceSets {\n        commonMain {\n            dependencies {\n                // ...\n                implementation(\"com.huanshankeji:compose-multiplatform-html-unified-material3:$version\")\n            }\n        }\n    }\n}\n```\n\nView [all the artifacts on Maven Central](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*).\n\nThis project depends on [Kobweb](https://github.com/varabyte/kobweb) which is not published to Maven Central yet, so you have to add the following Maven repository:\n\n```kotlin\nrepositories {\n    mavenCentral()\n    maven(\"https://us-central1-maven.pkg.dev/varabyte-repos/public\")\n}\n```\n\n### Material Symbols \u0026 Icons on JS\n\nSee [the corresponding section in Compose HTML Material](https://github.com/huanshankeji/compose-html-material?tab=readme-ov-file#material-symbols--icons) for configuring Material Icons on JS.\n\n## About Kobweb Silk\n\nThe Kotlin/JS (Compose HTML) portion of this project depends on [Kobweb Compose](https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/README.md) of [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) which is a UI layer built upon Compose HTML that provides `Modifier` (type-safe CSS API wrappers) and layout APIs. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML, especially if you need to customize the components further on Kotlin/JS (Compose HTML):\n\n1. [Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk)\n   1. [Modifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#modifier)\n      1. [attrsModifier and styleModifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#attrsmodifier-and-stylemodifier)\n1. [General purpose improvements on top of Compose HTML and Kotlin/JS](https://github.com/varabyte/kobweb?tab=readme-ov-file#general-purpose-improvements-on-top-of-compose-html-and-kotlinjs)\n1. [What about Compose Multiplatform for Web?](https://github.com/varabyte/kobweb?tab=readme-ov-file#what-about-compose-multiplatform-for-web)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanshankeji%2Fcompose-multiplatform-html-unified","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuanshankeji%2Fcompose-multiplatform-html-unified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanshankeji%2Fcompose-multiplatform-html-unified/lists"}