Working with WebAssembly and Kotlin: From A to Z

Introduction: Why WebAssembly and Kotlin are the Perfect Pair

Modern web development requires not only speed but also security. WebAssembly (Wasm) is a low-level binary format that runs in the browser at near-native speed. Kotlin, in turn, is a modern multiplatform language that compiles to JVM bytecode, JavaScript, and, more recently, to WebAssembly.

The combination of Kotlin and WebAssembly opens up new horizons: you can write complex logic in a familiar language with a powerful type system, and then run it in any modern browser without the overhead of JavaScript. In this article, we will cover working with WebAssembly and Kotlin from A to Z: from installing tools to deploying a finished application.

1. Setting up the Environment for Kotlin/Wasm

Before writing code, you need to prepare the environment. At the time of writing, official support for Kotlin/Wasm is in an experimental stage (starting from Kotlin 1.9.20). You will need:

\n
• JDK 11 or higher (JDK 17 recommended)
\n
• IntelliJ IDEA (Community Edition will work) or any editor with Gradle support
\n
• The latest version of Kotlin (1.9.22+).
\n

Creating a Project

Let's create a new Gradle project with a multiplatform configuration. In the build.gradle.kts file, specify the plugins and the Wasm target:

plugins {\n    kotlin("multiplatform") version "1.9.22"\n    kotlin("plugin.serialization") version "1.9.22" // optional\n}\n\nkotlin {\n    wasmJs {\n        binaries.executable()\n        nodejs()\n        browser {\n            commonWebpackConfig {\n                cssSupport {\n                    enabled.set(true)\n                }\n            }\n        }\n    }\n\n    sourceSets {\n        val commonMain by getting\n        val wasmJsMain by getting {\n            dependencies {\n                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")\n            }\n        }\n    }\n}

After Gradle synchronization, the project structure will be ready for compilation to Wasm.

2. Writing Your First Program in Kotlin/Wasm

Let's create a simple module that calculates the factorial of a number — an ideal example for demonstrating Wasm performance.

Kotlin Code

In the src/wasmJsMain/kotlin folder, create a file Main.kt:

import kotlinx.coroutines.*\n\n// Function that will be exported to Wasm\n@WasmExport\nfun factorial(n: Int): Long {\n    if (n < 0) return -1L\n    var result = 1L\n    for (i in 2..n) {\n        result *= i\n    }\n    return result\n}\n\n// Entry point for the browser\nfun main() {\n    println("Kotlin/Wasm loaded!")\n    // Using coroutines for asynchronous calls\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("Factorial of 10: $result")\n    }\n}

The @WasmExport annotation makes the function accessible from JavaScript. Note: not all Kotlin types can be exported — primitives, strings, and arrays are supported.

Building and Running

Execute the Gradle command:

./gradlew wasmJsBrowserDevelopmentRun

After the build, a browser will open with a console where you will see the output. If everything went well, you have just run Kotlin in WebAssembly!

3. Interacting with JavaScript: A Bridge Between Two Worlds

One of the key features of Kotlin/Wasm is bidirectional interaction with JavaScript. You can call JS functions from Kotlin and vice versa.

Calling JavaScript from Kotlin

Let's add code to Main.kt that uses the browser's DOM API:

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // Using the global window object\n    window.alert("Kotlin go