0
# Compose Web Foundation (WASM/JS)
1
2
Compose Web Foundation provides comprehensive support for building modern web user interfaces using Compose Multiplatform. Compiled for WebAssembly/JavaScript target, it offers a type-safe HTML DSL, CSS-in-Kotlin styling system, and robust event handling, enabling developers to create web applications with the same declarative patterns used in other Compose targets.
3
4
## Package Information
5
6
- **Package Name**: org.jetbrains.compose.foundation:foundation-wasm-js
7
- **Package Type**: Maven
8
- **Language**: Kotlin
9
- **Installation**: Add to your `build.gradle.kts`:
10
11
```kotlin
12
dependencies {
13
implementation("org.jetbrains.compose.foundation:foundation-wasm-js:1.8.2")
14
}
15
```
16
17
## Core Imports
18
19
```kotlin
20
import org.jetbrains.compose.web.dom.*
21
import org.jetbrains.compose.web.css.*
22
import org.jetbrains.compose.web.attributes.*
23
import org.jetbrains.compose.web.events.*
24
```
25
26
## Basic Usage
27
28
```kotlin
29
import androidx.compose.runtime.*
30
import org.jetbrains.compose.web.dom.*
31
import org.jetbrains.compose.web.css.*
32
33
@Composable
34
fun App() {
35
Div({
36
style {
37
padding(16.px)
38
backgroundColor(Color.lightblue)
39
}
40
}) {
41
H1 { Text("Welcome to Compose Web") }
42
43
P({
44
style {
45
fontSize(18.px)
46
color(Color.darkblue)
47
}
48
}) {
49
Text("Building web UIs with type-safe HTML and CSS")
50
}
51
52
Button({
53
onClick { event ->
54
console.log("Button clicked!")
55
}
56
}) {
57
Text("Click Me")
58
}
59
}
60
}
61
```
62
63
## Architecture
64
65
Compose Web Foundation is organized around several key systems:
66
67
- **HTML DSL**: Type-safe composable functions for all HTML elements with proper attribute handling
68
- **CSS System**: Kotlin-based CSS with type-safe properties, units, and selectors
69
- **Event Handling**: Synthetic event system providing type-safe event handling across all DOM events
70
- **Attribute Management**: Comprehensive attribute system supporting HTML global attributes and element-specific attributes
71
- **Style Integration**: Seamless integration between inline styles and CSS class-based styling
72
73
## Capabilities
74
75
### HTML Elements
76
77
Complete set of type-safe HTML element constructors with proper attribute scoping and content builders.
78
79
```kotlin { .api }
80
@Composable
81
fun Div(
82
attrs: AttrBuilderContext<HTMLDivElement>? = null,
83
content: ContentBuilder<HTMLDivElement>? = null
84
)
85
86
@Composable
87
fun Text(value: String)
88
89
@Composable
90
fun Button(
91
attrs: AttrBuilderContext<HTMLButtonElement>? = null,
92
content: ContentBuilder<HTMLButtonElement>? = null
93
)
94
```
95
96
[HTML Elements](./html-elements.md)
97
98
### CSS Styling
99
100
Type-safe CSS-in-Kotlin system with comprehensive property support, units, and responsive design capabilities.
101
102
```kotlin { .api }
103
interface StyleScope {
104
fun width(value: CSSNumeric)
105
fun height(value: CSSNumeric)
106
fun backgroundColor(value: CSSColorValue)
107
fun padding(value: CSSNumeric)
108
fun margin(value: CSSNumeric)
109
}
110
111
val Number.px: CSSSizeValue<CSSUnitLength>
112
val Number.em: CSSSizeValue<CSSUnitLength>
113
val Number.percent: CSSSizeValue<CSSUnitPercentage>
114
```
115
116
[CSS Styling](./css-styling.md)
117
118
### HTML Attributes
119
120
Comprehensive attribute system supporting global HTML attributes and element-specific attributes with type safety.
121
122
```kotlin { .api }
123
interface AttrsScope<TElement> {
124
fun id(value: String)
125
fun classes(vararg classes: String)
126
fun style(builder: StyleScope.() -> Unit)
127
fun onClick(listener: (SyntheticMouseEvent) -> Unit)
128
fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult)
129
}
130
```
131
132
[HTML Attributes](./html-attributes.md)
133
134
### Event Handling
135
136
Synthetic event system providing type-safe event handling for all DOM events with proper event delegation and lifecycle management.
137
138
```kotlin { .api }
139
abstract class SyntheticEvent<out Element> {
140
val target: Element
141
val currentTarget: Element
142
val bubbles: Boolean
143
val cancelable: Boolean
144
145
fun preventDefault()
146
fun stopPropagation()
147
fun stopImmediatePropagation()
148
}
149
150
interface SyntheticMouseEvent : SyntheticEvent<Element> {
151
val clientX: Double
152
val clientY: Double
153
val button: Short
154
val buttons: Short
155
}
156
```
157
158
[Event Handling](./event-handling.md)
159
160
### Form Controls
161
162
Specialized form input components with controlled and uncontrolled patterns, validation support, and accessibility features.
163
164
```kotlin { .api }
165
@Composable
166
fun TextInput(
167
value: String,
168
attrs: AttrBuilderContext<HTMLInputElement>? = null
169
)
170
171
@Composable
172
fun CheckboxInput(
173
checked: Boolean,
174
attrs: AttrBuilderContext<HTMLInputElement>? = null
175
)
176
177
@Composable
178
fun Select(
179
attrs: AttrBuilderContext<HTMLSelectElement>? = null,
180
content: ContentBuilder<HTMLSelectElement>? = null
181
)
182
```
183
184
[Form Controls](./form-controls.md)
185
186
## Types
187
188
```kotlin { .api }
189
typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
190
typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit
191
192
interface ElementScope<out TElement> {
193
val scopeElement: TElement
194
}
195
196
interface CSSColorValue
197
interface CSSNumeric
198
interface CSSSizeValue<T> : CSSNumeric
199
200
sealed class DisplayStyle
201
sealed class Color : CSSColorValue
202
```