Kotlin Help

Kotlin for JavaScript

Kotlin/JS provides the ability to transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies to JavaScript. The current implementation of Kotlin/JS targets ES5.

The recommended way to use Kotlin/JS is via the kotlin.js and kotlin.multiplatform Gradle plugins. They let you easily set up and control Kotlin projects targeting JavaScript in one place. This includes essential functionality such as controlling the bundling of your application, adding JavaScript dependencies directly from npm, and more. To get an overview of the available options, check out the Kotlin/JS project setup documentation.

Kotlin/JS IR compiler

The Kotlin/JS IR compiler comes with a number of improvements over the old default compiler. For example, it reduces the size of generated executables via dead code elimination and provides smoother interoperability with the JavaScript ecosystem and its tooling.

By generating TypeScript declaration files (d.ts) from Kotlin code, the IR compiler makes it easier to create "hybrid" applications that mix TypeScript and Kotlin code and to leverage code-sharing functionality using Kotlin Multiplatform.

To learn more about the available features in the Kotlin/JS IR compiler and how to try it for your project, visit the Kotlin/JS IR compiler documentation page and the migration guide.

Use cases for Kotlin/JS

There are numerous ways to use Kotlin/JS. Here is a non-exhaustive list of scenarios in which you can use Kotlin/JS:

  • Write frontend web applications using Kotlin/JS

    • Kotlin/JS allows you to leverage powerful browser and web APIs in a type-safe fashion. Create, modify, and interact with the elements in the Document Object Model (DOM), use Kotlin code to control the rendering of canvas or WebGL components, and enjoy access to many more features that modern browsers support.

    • Write full, type-safe React applications with Kotlin/JS using the kotlin-wrappers provided by JetBrains, which provide convenient abstractions and deep integrations for React and other popular JavaScript frameworks. kotlin-wrappers also provides support for a select number of adjacent technologies, like react-redux, react-router, and styled-components. Interoperability with the JavaScript ecosystem means that you can also use third-party React components and component libraries.

    • Use the Kotlin/JS frameworks, which take full advantage of Kotlin concepts and its expressive power and conciseness.

  • Write server-side and serverless applications using Kotlin/JS

    • The Node.js target provided by Kotlin/JS enables you to create applications that run on a server or are executed on serverless infrastructure. This gives you all the advantages of executing in a JavaScript runtime, such as faster startup and a reduced memory footprint. With kotlinx-nodejs, you have typesafe access to the Node.js API directly from your Kotlin code.

  • Use Kotlin's multiplatform projects to share code with other Kotlin targets

    • All the functionality of Kotlin/JS can also be accessed when using the Kotlin multiplatform Gradle plugin.

    • If your backend is written in Kotlin, you can share common code such as data models or validation logic with a frontend written in Kotlin/JS, which allows you to write and maintain full-stack web applications.

    • You can also share business logic between your web interface and mobile apps for Android and iOS, and avoid duplicating commonly used functionality, like providing abstractions around REST API endpoints, user authentication, or your domain models.

  • Create libraries for use with JavaScript and TypeScript

    • You don't have to write your whole application in Kotlin/JS – instead, you can generate libraries from your Kotlin code that can be consumed as modules from any code base written in JavaScript or TypeScript, regardless of the other frameworks or technologies you use. This approach of creating hybrid applications allows you to leverage the competencies that you and your team might already have around web development while helping you reduce the amount of duplicated work, making it easier to keep your web target consistent with other targets of your application.

Of course, this is not a complete list of all the ways you can use Kotlin/JS to your advantage, but merely some cherry-picked use cases. We invite you to experiment with different combinations and find out what works best for your project.

Whatever your specific use case, Kotlin/JS projects can use compatible libraries from the Kotlin ecosystem, as well as third-party libraries from the JavaScript and TypeScript ecosystems. To use the latter from Kotlin code, you can either provide your own typesafe wrappers, use community-maintained wrappers, or let Dukat automatically generate Kotlin declarations for you. Using the Kotlin/JS-exclusive dynamic type allows you to loosen the constraints of Kotlin's type system and skip creating detailed library wrappers, though this comes at the expense of type safety.

Kotlin/JS is also compatible with the most common module systems: UMD, CommonJS, and AMD. The ability to produce and consume modules means that you can interact with the JavaScript ecosystem in a structured manner.

Kotlin/JS frameworks

Modern web development benefits significantly from frameworks that simplify building web applications. Here are a few examples of popular web frameworks for Kotlin/JS written by different authors:


KVision is an object-oriented web framework that makes it possible to write applications in Kotlin/JS with ready-to-use components that can be used as building blocks for your application's user interface. You can use both reactive and imperative programming models to build your frontend, use connectors for Ktor, Spring Boot, and other frameworks to integrate it with your server-side applications, and share code using Kotlin Multiplatform.

Visit KVision site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #kvision and #javascript channels in the Kotlin Slack.


fritz2 is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building and rendering HTML elements, and it makes use of Kotlin's coroutines and flows to express components and their data bindings. It provides state management, validation, routing, and more out of the box, and integrates with Kotlin Multiplatform projects.

Visit fritz2 site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #fritz2 and #javascript channels in the Kotlin Slack.


Doodle is a vector-based UI framework for Kotlin/JS. Doodle applications use the browser's graphics capabilities to draw user interfaces instead of relying on DOM, CSS, or Javascript. By using this approach, Doodle gives you precise control over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations.

Visit Doodle site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #doodle and #javascript channels in the Kotlin Slack.

Compose for Web

Compose for Web, a part of Compose Multiplatform, brings Google's Jetpack Compose UI toolkit to your browser. It allows you to build reactive web user interfaces using the concepts introduced by Jetpack Compose. It provides a DOM API to describe your website, as well as an experimental set of multiplatform layout primitives. Compose for Web also gives you the option to share parts of your UI code and logic across Android, desktop, and the web.

You can find more information about Compose Multiplatform on its landing page.

Join the #compose-web channel on the Kotlin Slack to discuss Compose for Web, or #compose for general Compose Multiplatform discussions.

Kotlin/JS, Today and Tomorrow

In this video, Kotlin Developer Advocate Sebastian Aigner explains the main Kotlin/JS benefits, shares some tips and use cases, and talks about the plans and upcoming features for Kotlin/JS.

Get started with Kotlin/JS

If you're new to Kotlin, a good first step is to familiarize yourself with the basic syntax of the language.

To start using Kotlin for JavaScript, please refer to Set up a Kotlin/JS project. You can also complete a tutorial to work through or check out the list of Kotlin/JS sample projects for inspiration. They contain useful snippets and patterns and can serve as nice jump-off points for your own projects.

Tutorials for Kotlin/JS

  • Build a web application with React and Kotlin/JS — tutorial guides you through the process of building a simple web application using the React framework, shows how a type-safe Kotlin DSL for HTML makes it easy to build reactive DOM elements, and illustrates how to use third-party React components and obtain information from APIs, all while writing the whole application logic in pure Kotlin/JS.

  • Build a full-stack web app with Kotlin Multiplatform teaches the concepts behind building an application that targets Kotlin/JVM and Kotlin/JS by building a client-server application that makes use of shared code, serialization, and other multiplatform paradigms. It also provides a brief introduction to working with Ktor both as a server- and client-side framework.

Sample projects for Kotlin/JS

  • Full-stack Spring collaborative to-do list shows how to create a to-do list for collaborative work using kotlin-multiplatform with JS and JVM targets, Spring for the backend, Kotlin/JS with React for the frontend, and RSocket.

  • Kotlin/JS and React Redux to-do list implements the React Redux to-do list using JS libraries (react, react-dom, react-router, redux, and react-redux) from npm and Webpack to bundle, minify, and run the project.

  • Full-stack demo application guides you through the process of building an app with a feed containing user-generated posts and comments. All data is stubbed by the fakeJSON and JSON Placeholder services.

Join the Kotlin/JS community

You can also join the #javascript channel in the official Kotlin Slack to chat with the community and the team.

Last modified: 27 March 2023