Get started with Kotlin/Wasm and Compose Multiplatform

Kotlin/Wasm is in Alpha. It may be changed at any time.

Join the Kotlin/Wasm community.

{style="note"}

This tutorial demonstrates how to run a Compose Multiplatform app with Kotlin/Wasm in IntelliJ IDEA, and generate artifacts to publish as a site on GitHub pages.

Before you start

Create a project using the Kotlin Multiplatform wizard:

  1. Open the Kotlin Multiplatform wizard.

  2. On the New Project tab, change the project name and ID to your preference. In this tutorial, we set the name to "WasmDemo" and the ID to "wasm.project.demo".

    These are the name and ID of the project directory. You can also leave them as they are.

    {style="tip"}

  3. Select the Web option. Make sure that no other options are selected.

  4. Click the Download button and unpack the resulting archive.

Kotlin Multiplatform wizard

Open the project in IntelliJ IDEA

  1. Download and install the latest version of IntelliJ IDEA.
  2. On the Welcome screen of IntelliJ IDEA, click Open or select File | Open in the menu bar.
  3. Navigate to the unpacked "WasmDemo" folder and click Open.

Run the application

  1. In IntelliJ IDEA, open the Gradle tool window by selecting View | Tool Windows | Gradle.

    You can find the Gradle tasks in the Gradle tool window once the project loads.

    You need at least Java 11 as your Gradle JVM for the tasks to load successfully.

    {style="note"}

  2. In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserDevelopmentRun task.

    Run the Gradle task

    Alternatively, you can run the following command in the terminal from the WasmDemo root directory:

    ./gradlew wasmJsBrowserDevelopmentRun -t

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

    http://localhost:8080/

    The port number can vary because the 8080 port may be unavailable. You can find the actual port number printed in the Gradle build console.

    {style="tip"}

    You see a "Click me!" button. Click it:

    Click me

    Now you see the Compose Multiplatform logo:

    Compose app in browser

Generate artifacts

In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserDistribution task.

Run the Gradle task

Alternatively, you can run the following command in the terminal from the WasmDemo root directory:

./gradlew wasmJsBrowserDistribution

Once the application task completes, you can find the generated artifacts in the composeApp/build/dist/wasmJs/productionExecutable directory:

Artifacts directory

Publish on GitHub pages

  1. Copy all the contents in your productionExecutable directory into the repository where you want to create a site.

  2. Follow GitHub's instructions for creating your site.

    It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub.

    {style="note"}

  3. In a browser, navigate to your GitHub pages domain.

    Navigate to GitHub pages

    Congratulations! You have published your artifacts on GitHub pages.

下一步做什么？

Join the Kotlin/Wasm community in Kotlin Slack:

Join the Kotlin/Wasm community

Try more Kotlin/Wasm examples: