Learn Kotlin-js-wasm - 10 Code Examples & CST Typing Practice Test
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.
View all 10 Kotlin-js-wasm code examples →
Learn KOTLIN-JS-WASM with Real Code Examples
Updated Nov 25, 2025
Code Sample Descriptions
Simple Kotlin/JS WebAssembly Program
# kotlin/demo/Main.kt
import kotlin.js.*
fun main() {
console.log("Hello, Kotlin WASM!")
}
A basic Kotlin/JS program compiled to WebAssembly that prints 'Hello, Kotlin WASM!' to the browser console.
Kotlin/JS WASM Button Click
# kotlin/demo/Button.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLParagraphElement
fun main() {
val button = document.createElement("button") as HTMLButtonElement
button.textContent = "Click Me"
document.body?.appendChild(button)
val p = document.createElement("p") as HTMLParagraphElement
document.body?.appendChild(p)
button.onclick = {
p.textContent = "Button clicked!"
Unit
}
}
Adds a button to the page that updates text when clicked.
Kotlin/JS WASM Input Binding
# kotlin/demo/Input.kt
import kotlin.browser.document
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.HTMLParagraphElement
fun main() {
val input = document.createElement("input") as HTMLInputElement
document.body?.appendChild(input)
val p = document.createElement("p") as HTMLParagraphElement
document.body?.appendChild(p)
input.oninput = {
p.textContent = input.value
Unit
}
}
Reads value from an input field and displays it in a paragraph.
Kotlin/JS WASM Conditional Rendering
# kotlin/demo/Conditional.kt
import kotlin.browser.document
import org.w3c.dom.HTMLParagraphElement
fun main() {
val show = true
val p = document.createElement("p") as HTMLParagraphElement
document.body?.appendChild(p)
if (show) {
p.textContent = "Condition is true"
} else {
p.textContent = "Condition is false"
}
}
Displays different messages based on a boolean variable.
Kotlin/JS WASM Loop Rendering
# kotlin/demo/Loop.kt
import kotlin.browser.document
import org.w3c.dom.HTMLParagraphElement
fun main() {
for (i in 1..5) {
val p = document.createElement("p") as HTMLParagraphElement
p.textContent = "Item $i"
document.body?.appendChild(p)
}
}
Creates a list of items using a loop.
Kotlin/JS WASM Timer Update
# kotlin/demo/Timer.kt
import kotlin.browser.document
import kotlin.js.Date
import kotlin.js.setInterval
import org.w3c.dom.HTMLParagraphElement
fun main() {
val p = document.createElement("p") as HTMLParagraphElement
document.body?.appendChild(p)
setInterval({
p.textContent = Date().toLocaleTimeString()
}, 1000)
}
Updates the current time every second in the browser.
Kotlin/JS WASM Event Callback
# kotlin/demo/Event.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
fun main() {
val button = document.createElement("button") as HTMLButtonElement
button.textContent = "Click Event"
document.body?.appendChild(button)
button.onclick = {
console.log("Button clicked!")
Unit
}
}
Logs a message to console when a button is clicked.
Kotlin/JS WASM Fetch Example
# kotlin/demo/Fetch.kt
import kotlin.browser.document
import kotlinx.browser.window
import org.w3c.dom.HTMLParagraphElement
fun main() {
val p = document.createElement("p") as HTMLParagraphElement
document.body?.appendChild(p)
window.fetch("https://api.github.com").then { response ->
response.text().then { text ->
p.textContent = text
}
}
}
Fetches data from an API and displays it in a paragraph.
Kotlin/JS WASM Toggle Visibility
# kotlin/demo/Toggle.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLParagraphElement
fun main() {
val p = document.createElement("p") as HTMLParagraphElement
p.textContent = "Visible Text"
document.body?.appendChild(p)
val button = document.createElement("button") as HTMLButtonElement
button.textContent = "Toggle"
document.body?.appendChild(button)
var visible = true
button.onclick = {
visible = !visible
p.style.display = if (visible) "block" else "none"
Unit
}
}
Toggles the visibility of a paragraph when a button is clicked.
Kotlin/JS WASM Dynamic List
# 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
}
}
Adds items dynamically to a list when a button is clicked.
Frequently Asked Questions about Kotlin-js-wasm
What is Kotlin-js-wasm?
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.
What are the primary use cases for Kotlin-js-wasm?
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
What are the strengths of Kotlin-js-wasm?
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
What are the limitations of Kotlin-js-wasm?
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
How can I practice Kotlin-js-wasm typing speed?
CodeSpeedTest offers 10+ real Kotlin-js-wasm code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.