Compose Multiplatform UI for WASM/JS

Compose Multiplatform UI for WASM/JS enables developers to create declarative user interfaces that run in web browsers using WebAssembly technology. This package provides the complete Compose UI toolkit optimized for WASM targets, including window management, UI components, resource handling, and browser integration capabilities.

Package Information

• Package Name: org.jetbrains.compose.ui:ui-wasm-js
• Package Type: maven
• Language: Kotlin
• Version: 1.8.2
• Target Platforms: WebAssembly (WASM), JavaScript (JS)
• Installation: Add to your build.gradle.kts:

kotlin {
    wasmJs {
        moduleName = "your-app-name"
        browser()
        binaries.executable()
    }
}

dependencies {
    implementation(compose.runtime)
    implementation(compose.ui)
    implementation(compose.foundation)
    implementation(compose.material)
    implementation(compose.components.resources)
}

Core Imports

// Window management
import androidx.compose.ui.window.CanvasBasedWindow
import androidx.compose.ui.ExperimentalComposeUiApi

// UI components
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.*

// Resources
import org.jetbrains.compose.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi

Basic Application Setup

@OptIn(ExperimentalComposeUiApi::class, ExperimentalResourceApi::class)
fun main() {
    configureWebResources {
        resourcePathMapping { path -> "./$path" }
    }
    CanvasBasedWindow("My App") {
        App()
    }
}

@Composable
fun App() {
    MaterialTheme {
        Surface {
            Text("Hello, Compose WASM!")
        }
    }
}

Architecture Overview

Compose Multiplatform UI for WASM/JS is not a standalone module but part of the unified compose.ui multiplatform system. WASM support is achieved through:

• Kotlin/Wasm compilation: Uses wasmJs target with wasmJsMain source sets
• Canvas-based rendering: All UI renders to HTML5 Canvas via Skiko WASM runtime
• Browser integration: Direct access to browser APIs and web platform features
• Resource system: Optimized async loading for web deployment

Core Capabilities

Window Management and Application Lifecycle

Create and manage application windows with canvas-based rendering, handle application lifecycle events, and configure the main application entry point.

Key APIs:

fun CanvasBasedWindow(
    canvasElementId: String? = null,
    title: String = "Compose Application", 
    content: @Composable () -> Unit
)

Window Management Documentation

UI Components and Layouts

Complete set of declarative UI components including layouts, text, images, buttons, and interactive elements. All standard Compose components work seamlessly with WASM targets.

Key APIs:

@Composable fun Column(modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)
@Composable fun Row(modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit)  
@Composable fun Box(modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit)
@Composable fun Text(text: String, modifier: Modifier = Modifier, style: TextStyle = LocalTextStyle.current)
@Composable fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit)

UI Components Documentation

Material Design System

Full Material Design component library with theming, colors, typography, and interactive components optimized for web deployment.

Key APIs:

@Composable fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
)
@Composable fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
)

Material Design Documentation

Resource Management

Asynchronous resource loading system for images, strings, fonts, and other assets with web-optimized caching and loading strategies.

Key APIs:

fun configureWebResources(configure: WebResourcesConfiguration.() -> Unit)
@Composable fun painterResource(resource: DrawableResource): Painter
@Composable fun stringResource(resource: StringResource): String

Resource Management Documentation

Browser Integration and Platform APIs

Direct integration with browser APIs, system preferences detection, network operations, and JavaScript interoperability for platform-specific functionality.

Key APIs:

// Browser window access
val window: Window = kotlinx.browser.window
val document: Document = kotlinx.browser.document

// Platform detection
fun getCurrentPlatform(): String
fun getCurrentLanguage(): String

Browser Integration Documentation

State Management and Reactivity

Compose runtime system for state management, side effects, and reactive programming patterns that work seamlessly with WASM execution model.

Key APIs:

@Composable fun <T> remember(calculation: () -> T): T
@Composable fun <T> mutableStateOf(value: T): MutableState<T>
@Composable fun LaunchedEffect(key1: Any?, block: suspend CoroutineScope.() -> Unit)
@Composable fun <T> State<T>.collectAsState(): State<T>

State Management Documentation

Browser Compatibility

Minimum Requirements:

• Chrome 119+
• Firefox 120+
• Safari 17+
• Edge 119+

Required Features:

• WebAssembly GC support
• WebAssembly Exception-Handling
• ES Modules support

Performance Considerations

• Single-threaded execution: All operations run on the main thread
• Memory management: Manual GC triggering available for performance-critical scenarios
• Bundle optimization: Tree-shaking and code splitting supported
• Async loading: Resources load asynchronously to prevent blocking

Development Workflow

1. Project setup: Configure Kotlin multiplatform with wasmJs target
2. Dependencies: Add Compose Multiplatform dependencies
3. Development: Write Compose UI code using standard APIs
4. Testing: Use Compose testing framework for UI tests
5. Building: Generate WASM binary and JS loader
6. Deployment: Serve static files with WASM MIME types configured

Distribution

WASM applications are distributed as:

• .wasm binary file containing compiled Kotlin code
• .js loader script for WASM initialization
• index.html entry point with canvas element
• Static resources (images, fonts, manifests)

Error Handling

Common issues and solutions:

• WASM loading failures: Ensure proper MIME type configuration
• Canvas not found: Verify canvas element ID matches application setup
• Resource loading errors: Check resource path configuration and CORS policies
• Memory issues: Monitor memory usage and implement proper cleanup