Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Kotlin/JS WASM Dynamic List - Kotlin-js-wasm Typing CST Test
Kotlin/JS WASM Dynamic List — Kotlin-js-wasm Code
Adds items dynamically to a list when a button is clicked.
# kotlin/demo/DynamicList.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLUListElement
fun main() {
val ul = document.createElement("ul") as HTMLUListElement
document.body?.appendChild(ul)
val button = document.createElement("button") as HTMLButtonElement
button.textContent = "Add Item"
document.body?.appendChild(button)
var count = 1
button.onclick = {
val li = document.createElement("li")
li.textContent = "Item $count"
ul.appendChild(li)
count++
Unit
}
}Kotlin-js-wasm Language Guide
Kotlin JS + WebAssembly (kotlin-js-wasm) allows developers to compile Kotlin code into highly optimized WebAssembly modules or JavaScript bundles. It enables strongly typed Kotlin applications to run in browsers, Node.js, and WASI runtimes with excellent interoperability and multiplatform support.
Primary Use Cases
- ▸Browser applications written entirely in Kotlin
- ▸High-performance Wasm modules with shared business logic
- ▸Full-stack Kotlin (Ktor backend + Kotlin/JS/Wasm frontend)
- ▸Node.js and Deno apps using Kotlin
- ▸WASI modules for CLI or edge runtimes
Notable Features
- ▸Two compilation targets: JavaScript (ESBuild) and WebAssembly
- ▸Interop with JS, DOM, and npm libraries
- ▸Kotlin Multiplatform code sharing
- ▸Wasm GC support for efficient memory handling
- ▸Type-safe React wrappers via KVision, Compose for Web
Origin & Creator
Kotlin JS/WASM is developed and maintained by JetBrains as part of the Kotlin Multiplatform ecosystem.
Industrial Note
kotlin-js-wasm is heavily used where teams want type-safe browser code, shared business logic across platforms, or high-performance UI/compute modules inside browser/desktop/edge environments.
Quick Explain
- ▸Kotlin/JS compiles Kotlin code into JavaScript or WebAssembly.
- ▸Wasm backend (Kotlin/Wasm) provides near-native performance and small binaries.
- ▸Highly interoperable with JavaScript through Kotlin’s JS/interop APIs.
- ▸Integrated with Kotlin Multiplatform to share logic across JS, JVM, Android, and Native.
- ▸Designed for modern browser apps, UI frameworks, and high-performance computations.
Core Features
- ▸Kotlin -> JS/Wasm compiler via Kotlin IR backend
- ▸Full type-safety across browser and JS ecosystem
- ▸Seamless DOM and Web API interoperability
- ▸Wasm-GC support enabling efficient managed memory
- ▸Multiplatform project architecture
Learning Path
- ▸Learn Kotlin basics
- ▸Understand Kotlin Multiplatform
- ▸Try Kotlin/JS DOM interop
- ▸Build a simple Kotlin/Wasm demo
- ▸Create a full-stack Kotlin/Compose app
Practical Examples
- ▸Build a browser dashboard with Kotlin/Wasm
- ▸Kotlin Wasm math engine for web
- ▸Node.js scripts written in Kotlin
- ▸Kotlin React (KVision) apps
- ▸Full-stack Kotlin web app with shared code
Comparisons
- ▸Kotlin/Wasm vs TypeScript: stronger type safety & multiplatform
- ▸Kotlin/JS vs React/TS: similar, but Kotlin has safer typing
- ▸Kotlin/Wasm vs Rust/Wasm: easier language, slightly slower
- ▸Kotlin/Wasm vs Go/TinyGo: better tooling, larger runtime
- ▸Kotlin/Wasm vs SwiftWasm: similar, Kotlin more mature for web
Strengths
- ▸Strong typing and modern Kotlin language features
- ▸High-performance Wasm backend
- ▸Deep multiplatform integration
- ▸Excellent tooling via JetBrains IDEs
- ▸Growing ecosystem of Kotlin-first web UI frameworks
Limitations
- ▸Wasm backend still evolving (2025)
- ▸Some JS libraries require custom interop
- ▸Smaller ecosystem compared to TypeScript
- ▸Occasional tooling bugs with Kotlin/JS Gradle plugins
- ▸WASI support not yet complete
When NOT to Use
- ▸Ultra low-level Wasm needs (Rust/Zig better)
- ▸Projects needing tiny WASM binary sizes
- ▸Pure JS ecosystem-heavy apps
- ▸Realtime or GPU-bound workloads
- ▸Legacy browsers without Wasm-GC
Cheat Sheet
- ▸kotlin { js(IR) { browser() } }
- ▸kotlin { wasm { browser() } }
- ▸use external keyword for JS imports
- ▸./gradlew jsBrowserDevelopmentRun
- ▸./gradlew wasmBrowserDistribution
FAQ
- ▸Does Kotlin/Wasm support GC?
- ▸Yes - with Wasm-GC in modern browsers.
- ▸Can Kotlin/Wasm run in Node?
- ▸Partial, JS target is more stable.
- ▸Is Kotlin/JS production-ready?
- ▸Yes, widely used in real products.
- ▸Can I share code with Android/JVM?
- ▸Yes - core benefit of Kotlin Multiplatform.
- ▸Are Wasm binaries small?
- ▸Smaller than JS bundles, but larger than TinyGo/Rust.
30-Day Skill Plan
- ▸Week 1: Kotlin/JS basics
- ▸Week 2: Interop + DOM APIs
- ▸Week 3: Wasm target + build tools
- ▸Week 4: Compose for Web UI
- ▸Week 5: Optimize + deploy Kotlin/Wasm app
Final Summary
- ▸Kotlin JS + Wasm brings modern Kotlin to browsers and JS platforms.
- ▸Wasm backend provides high performance and type safety.
- ▸Excellent for shared logic across web, mobile, and backend.
- ▸Strong ecosystem via JetBrains tooling.
- ▸Ideal for teams using Kotlin end-to-end.
Project Structure
- ▸shared/ - shared Kotlin module
- ▸jsApp/ - Kotlin/JS or Kotlin/Wasm app
- ▸build.gradle.kts - configuration
- ▸src/jsMain/kotlin - browser code
- ▸dist/ - generated Wasm/JS bundles
Monetization
- ▸Kotlin-based frontend SaaS apps
- ▸Wasm compute plugins
- ▸Enterprise internal tools
- ▸Full-stack Kotlin services
- ▸Cross-platform product SDKs
Productivity Tips
- ▸Use IntelliJ IDEA for Kotlin/JS/Wasm
- ▸Leverage Compose for Web previews
- ▸Use external declarations wisely
- ▸Split code into multiplatform modules
- ▸Enable incremental builds
Basic Concepts
- ▸Kotlin/JS -> transpiles Kotlin IR to JavaScript
- ▸Kotlin/Wasm -> compiles Kotlin IR to WebAssembly (.wasm)
- ▸Interop -> JS functions and DOM bindings via Kotlin
- ▸Multiplatform -> shared Kotlin code across targets
- ▸Compose for Web -> declarative UI on JS/Wasm