Kotlin/JS WASM Toggle Visibility - Kotlin-js-wasm Typing CST Test

Loading…

Kotlin/JS WASM Toggle Visibility — Kotlin-js-wasm Code

Toggles the visibility of a paragraph when a button is clicked.

# 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
	}
}

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.

More Kotlin-js-wasm Typing Exercises

Simple Kotlin/JS WebAssembly Program Kotlin/JS WASM Button Click Kotlin/JS WASM Input Binding Kotlin/JS WASM Conditional Rendering Kotlin/JS WASM Loop Rendering Kotlin/JS WASM Timer Update Kotlin/JS WASM Event Callback Kotlin/JS WASM Fetch Example Kotlin/JS WASM Dynamic List

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Kotlin/JS WASM Toggle Visibility — Kotlin-js-wasm Code

Toggles the visibility of a paragraph when a button is clicked.

# 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 } }

Kotlin-js-wasm Language Guide

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.