Enable an experimental Kotlin/Wasm Wizard in IntelliJ IDEA

1. Press double Shift to open a search, enter Registry.

   

2. Select Registry from the list. Registry window opens.

3. Find the kotlin.wasm.wizard registry key in the list, and enable it.

   

4. Restart IntelliJ IDEA.

Create a new Kotlin/Wasm project

1. In IntelliJ IDEA, select File | New | Project.

2. In the panel on the left, select Kotlin Multiplatform.

3. Enter a project name, select Browser Application with Kotlin/Wasm as the project template, and click Next.

   

   By default, your project will use Gradle with Kotlin DSL as the build system.

4. Accept the default configuration on the next screen and click Finish. Your project will open.

   By default, the wizard creates the necessary Simple.kt file.

5. Open the build.gradle.kts file and ensure that the Kotlin Multiplatform plugin version is set to 1.8.20:

   plugins {
       kotlin("multiplatform") version "1.8.20"
   }
   

Build and run the application

1. Click Build Project next to the run configuration at the top of the screen:

   

2. Run the application by clicking Run next to the run configuration at the top of the screen.

3. Once the application starts, open the following URL in your browser:

   http://localhost:8080
   

   You should see the "JS Client" tab in your browser:

   

   If you open a page source, you'll find the name of the JavaScript bundle:

   

Update your application

1. Open Simple.kt and update the code:

   import kotlinx.browser.document
   import kotlinx.dom.appendText
   
   fun main() {
       println("Hello, ${greet()}")
       document.body!!.appendText("Hello, you're using Kotlin/Wasm!")
   }
   
   fun greet() = "world"
   

2. Run the application by clicking Run next to the run configuration at the top of the screen.

3. Once the application starts, open the following URL in your browser:

http://localhost:8080

You'll see the text "Hello, you're using Kotlin/Wasm!":

What's next?

Explore the Kotlin/Wasm interoperability with JavaScript