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
```