0
# Compose Multiplatform
1

2
Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms with Kotlin. It enables developers to build native applications for iOS, Android, Desktop (Windows, macOS, Linux), and Web platforms using a single Kotlin codebase. Based on Jetpack Compose, it provides a unified API for creating responsive, modern user interfaces with platform-specific optimizations.
3

4
## Package Information
5

6
- **Package Name**: org.jetbrains.compose:compose-gradle-plugin
7
- **Package Type**: Gradle Plugin
8
- **Language**: Kotlin
9
- **Installation**: Apply plugin `id("org.jetbrains.compose")` in your `build.gradle.kts`
10

11
## Core Imports
12

13
Plugin application:
14

15
```kotlin
16
plugins {
17
    id("org.jetbrains.compose") version "1.8.2"
18
}
19

20
repositories {
21
    jetbrainsCompose()
22
}
23
```
24

25
Dependency management:
26

27
```kotlin
28
dependencies {
29
    implementation(compose.desktop.currentOs)
30
    implementation(compose.material3)
31
    implementation(compose.components.resources)
32
    implementation(compose.html.core)
33
}
34
```
35

36
## Basic Usage
37

38
```kotlin
39
// Apply plugin and configure desktop application
40
plugins {
41
    id("org.jetbrains.compose")
42
}
43

44
compose {
45
    desktop {
46
        application {
47
            mainClass = "MainKt"
48
            
49
            nativeDistributions {
50
                targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
51
                packageName = "MyApp"
52
                packageVersion = "1.0.0"
53
            }
54
        }
55
    }
56
    
57
    resources {
58
        publicResClass = false
59
        nameOfResClass = "Res"
60
        generateResClass = auto
61
    }
62
}
63

64
dependencies {
65
    implementation(compose.desktop.currentOs)
66
    implementation(compose.material3)
67
    implementation(compose.ui)
68
    implementation(compose.components.resources)
69
}
70
```
71

72
## Architecture
73

74
Compose Multiplatform consists of several key components:
75

76
- **Gradle Plugin**: Build tooling and dependency management for multiplatform Compose projects
77
- **Component Libraries**: Reusable UI components (Resources, SplitPane, AnimatedImage) with cross-platform implementations
78
- **HTML/Web Support**: Complete web development framework with DOM manipulation, CSS styling, and SVG support
79
- **Platform Abstraction**: Unified APIs that compile to platform-specific implementations while maintaining native performance
80

81
## Capabilities
82

83
### Gradle Plugin Configuration
84

85
Complete build system integration for Compose Multiplatform projects, providing application packaging, dependency management, and platform-specific configurations.
86

87
```kotlin { .api }
88
// Plugin extension
89
abstract class ComposeExtension {
90
    abstract val desktop: DesktopExtension
91
    abstract val resources: ResourcesExtension
92
    abstract val web: WebExtension
93
}
94

95
// Desktop application configuration
96
abstract class JvmApplication {
97
    var mainClass: String?
98
    val nativeDistributions: JvmApplicationDistributions
99
    fun nativeDistributions(configure: JvmApplicationDistributions.() -> Unit)
100
}
101
```
102

103
[Gradle Plugin](./gradle-plugin.md)
104

105
### Component Libraries
106

107
Cross-platform component libraries providing resources management, UI widgets, and tooling support with consistent APIs across all platforms.
108

109
```kotlin { .api }
110
// Resources
111
@Composable fun stringResource(resource: StringResource): String
112
@Composable fun painterResource(resource: DrawableResource): Painter
113

114
// SplitPane
115
@Composable fun VerticalSplitPane(
116
    modifier: Modifier = Modifier,
117
    splitPaneState: SplitPaneState = rememberSplitPaneState(),
118
    content: SplitPaneScope.() -> Unit
119
)
120

121
// UI Tooling Preview
122
@Target(AnnotationTarget.FUNCTION)
123
annotation class Preview
124
```
125

126
[Component Libraries](./component-libraries.md)
127

128
### HTML/Web Development
129

130
Complete web development framework with type-safe DOM manipulation, CSS styling, SVG support, and testing utilities for building web applications with Compose.
131

132
```kotlin { .api }
133
// DOM Elements
134
@Composable fun Div(
135
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
136
    content: ContentBuilder<HTMLDivElement>? = null
137
)
138

139
@Composable fun Button(
140
    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
141
    content: ContentBuilder<HTMLButtonElement>? = null
142
)
143

144
// Styling
145
interface StyleScope {
146
    fun property(propertyName: String, value: StylePropertyValue)
147
}
148

149
// SVG Support  
150
@Composable fun Svg(
151
    viewBox: String? = null,
152
    attrs: AttrBuilderContext<SVGSVGElement>? = null,
153
    content: ContentBuilder<SVGSVGElement>? = null
154
)
155
```
156

157
[HTML/Web Libraries](./html-web.md)
158

159
## Common Types
160

161
```kotlin { .api }
162
// Target formats for desktop distributions
163
enum class TargetFormat {
164
    AppImage, Deb, Rpm, Dmg, Pkg, Exe, Msi;
165
    val isCompatibleWithCurrentOS: Boolean
166
}
167

168
// Resource environment for localization
169
class ResourceEnvironment internal constructor(
170
    internal val language: LanguageQualifier,
171
    internal val region: RegionQualifier,
172
    internal val theme: ThemeQualifier,
173
    internal val density: DensityQualifier
174
)
175

176
// CSS units system
177
interface CSSUnit
178
interface CSSUnitLength : CSSUnit
179
val Number.px: CSSLengthValue
180
val Number.em: CSSLengthValue
181
val Number.percent: CSSPercentageValue
182
```