Present and Future of Kotlin for Web

TL;DR: We remain committed to empowering Kotlin developers with robust and seamless support in Kotlin Multiplatform for web development. To achieve this, we are working on several key areas:

• Improving IDE support for web targets.
• Promoting Kotlin/Wasm and Compose Multiplatform for web to Beta.
• Providing a compatibility mode for Compose Multiplatform in older browsers.
• Eliminating most limitations of interop in Kotlin/JS.
• Targeting the latest JavaScript standard in Kotlin/JS.

Kotlin Multiplatform (KMP) aims to help developers share code across different platforms, significantly reducing development time and effort. The web plays a crucial role in this ecosystem, being the most widely used client-side platform.

While we haven’t published an update in a while, a lot has been happening, and now we’re ready to share the latest developments.

Current landscape: JavaScript and Wasm

Kotlin Multiplatform is a production-ready technology that targets many platforms via four compiler backends: Kotlin/JVM, Kotlin/JS, Kotlin/Native, and Kotlin/Wasm.

When it comes to the web, KMP offers two different solutions: compiling to JavaScript (Kotlin/JS) and WebAssembly (Kotlin/Wasm). Let us explain why we have both of them.

Why two web targets?

Kotlin Multiplatform provides a unique approach for sharing code and is built around flexibility. Depending on your project’s needs, you might want to:

• Share only the business logic and keep the UI native.
• Share both the business logic and the UI across all platforms.

These two cases have different technical requirements, and JS and Wasm targets serve them accordingly.

Sharing business logic

If your goal is to share business logic on the web, you may have a few requirements, like the ability to:

• Provide a complex business logic to the native UI, which is predominantly based on JS.
• Load only the required business logic for a specific web page to reduce network load.
• Interact between JavaScript and Kotlin parts without extra performance costs.

In this case, Kotlin/JS is the better fit because it provides a better interop experience.

Sharing both logic and UI

If you want to share the entire application, including the UI, across platforms, this is where Compose Multiplatform comes into play. With it, your requirements for web rendering and performance naturally change:

• You want the same UI rendered consistently on every platform, including the web.
• Smooth animations and responsive transitions become critical.

Here, Kotlin/Wasm shines. According to our benchmarks, WebAssembly performs much better (almost 3 times faster) in the UI-sharing scenario.

See our detailed recommendation on which target to choose for your application.

What updates are coming soon?

In the sections that follow, we’ll walk you through the most important updates and initiatives, from IDE tooling and interoperability improvements to the evolution of Compose Multiplatform for web.

Let’s take a closer look at those areas.

Better IDE support for web targets

As part of our broader effort to provide an excellent Kotlin Multiplatform developer experience, we’re actively working on better KMP support in IntelliJ IDEA and Android Studio.

This also includes improving the experience for JavaScript and Wasm targets. While code functionality is available in both IDEs, certain features, like debugging of JavaScript and Wasm targets, are currently available only in IntelliJ IDEA.

We’ve started this journey by taking the following steps:

• Adding a wizard for creating a new KMP project targeting web platforms.
• Integrating a platform debugger to debug your KMP project on both web targets easily.
• Adding gutter icons for application entry points and tests to run them easily, without thinking about which Gradle task you should use.

Promoting our Wasm target and Compose Multiplatform for web to Beta

We understand that the web is an important platform for many Compose Multiplatform users, and we are committed to enhancing the development experience for those targeting it.

Continued improvements in Compose Multiplatform for web

Since moving to Alpha, Compose Multiplatform for web has received major updates, reducing the feature gap with other platforms. For example, text input handling was significantly improved, especially on mobile devices. The next big things we are working on are accessibility and interoperability with native HTML elements. 

Kotlin/Wasm: Now in all modern versions of major browsers

WebAssembly (Wasm) has also matured. As of December 11, 2024, all major browsers, including Safari, support WebAssembly Garbage Collection (WasmGC). This means Kotlin/Wasm applications can now run across all modern major browsers.

Improving the Wasm development experience

Over the last few years, improving the development experience for Wasm target has been our top priority. To that end, we’ve: 

• Introduced incremental compilation, making builds up to twice as fast.
• Enhanced debugging support for browsers, providing better stepping functionality and an improved variable view.

In the next few months, we will focus more on enhancing stability to make targeting Wasm in KMP projects as smooth as possible and reduce breaking changes in the future. 

Overall, we aim to make both technologies feature-complete (as close as possible) and promote them to Beta this year.

Providing a compatibility mode for Compose Multiplatform

As we already mentioned, we recommend targeting Wasm when you want an application with a multiplatform UI. However, there are some limitations to consider. The Wasm target relies on browser support for WasmGC, which may cause Kotlin applications targeting Wasm to be incompatible with older browsers that lack this support – see this guide for more details.

To address this, we’re introducing a compatibility mode in Compose Multiplatform.

• With a new common source set called webMain, you will now have a single source for the `actual` declarations for both JavaScript and Wasm targets. 

• Using a special DSL in the CMP Gradle plugin, your application will be compiled to run the Wasm version of the app in modern browsers, taking full advantage of the Wasm target’s performance. For older browsers, the JavaScript version will run automatically, preventing a blank screen and maintaining usability.
  

Note: Compose Multiplatform still relies on WebAssembly on the rendering engine side. However, this part uses WebAssembly features that have been available in all major browsers since 2017.

Eliminate most of the limitations of interop in Kotlin/JS

Today’s approach to interop with JavaScript in Kotlin is based on the experimental @JsExport annotation, which has constraints that make it challenging to use in enterprise applications.

We are working on removing those limitations to provide a more seamless interop experience with JavaScript. Once this work is complete, you can mark the majority of Kotlin declarations with the @JsExport annotation, which will be stabilized.

For cases where you can’t mark a declaration with this annotation, like when you don’t own sources of the used libraries but still want to export some declarations from there to JavaScript, there will be a DSL inside the multiplatform Gradle plugin, which helps to export all the needed declarations from those libraries.

Targeting the latest JavaScript standard in Kotlin/JS

Historically, the only available KMP JS target was ES5, which is now quite outdated. For the last two years, we’ve worked on introducing experimental support for compiling with modern JavaScript features like classes, generators, and arrow functions.

This new support reduces bundle size and improves performance in some cases, which is why we aim to stabilize it and add more modern features like BigInt and dynamic import.

We aim to target only the latest version of the JavaScript specification, thereby achieving even further reductions in bundle size and performance improvements. If you need to target older browsers, we’re integrating Babel inside our Gradle plugin. It will lower the generated JavaScript for compatibility with older browsers, so you still have the same range of platform support.

The road ahead for Kotlin for web

These aren’t the only improvements planned for Kotlin’s web targets. Several important initiatives are already underway.

Here’s what’s coming next:

• Multithreading support in the Wasm target. To take advantage of modern multi-core processors and provide the best performance, we are going to prototype multithreading support for the Kotlin/Wasm compiler. Our goal is to make multithreaded development on the web as easy as it is on the JVM, elevating the development of high-performance web applications to a new level.

• Per-module compilation in the Wasm target. To improve development round-trip time and program modularity, we are working on generating multiple WebAssembly modules. This approach complements the recently introduced incremental compilation by allowing the recompilation of only the changed Kotlin modules. It also enables loading program parts on demand, which can significantly improve application startup time and reduce network load. In addition, it is a building block for supporting plugin systems in Kotlin applications targeting Wasm.

• Modern JavaScript tooling integration. To speed up the compilation cycle, we want to add an alternative to the Webpack integration we have today inside the Gradle plugin. We aim to decouple the Webpack integration to enable integration with any modern JavaScript bundler, like esbuild, repack, Vite, or bun.

• Automatic generation of Kotlin wrappers from TypeScript typings. To remove the frustration of writing Kotlin wrappers to consume a JavaScript/TypeScript library, we’ve come back to the integration of an automatic external-declarations generator for the multiplatform Gradle plugin. For each NPM dependency declared in your project, you will automatically get ready-to-consume Kotlin declarations describing the available API from the library.

Final thoughts

Thanks to recent surveys, YouTrack tickets, questions, and suggestions from across our channels, we’ve gathered a wealth of valuable feedback and built a clear direction for Kotlin on the web. We couldn’t have done it without you!

To share more feedback or questions, please join our Slack community. There, you will find specific channels on various topics you might be interested in, like #webassembly, #compose-web, #javascript, and #multiplatform.

We appreciate all your support, and we are committed to providing you with a great experience as you build with Kotlin across platforms.