# @JsExport guide for exposing Kotlin to JS

DevFeed: [@JsExport guide for exposing Kotlin to JS](<https://devfeed.tech/articles/jsexport-guide-for-exposing-kotlin-to-js-24714.md>)

Original publisher: [Read original article](<https://dev.to/touchlab/jsexport-guide-for-exposing-kotlin-to-js-20l9>)

Author: Jigar Brahmbhatt

Published: 2022-03-14T16:19:31Z

Content type: tutorial

Language: en

Sources: [Touchlab](<https://devfeed.tech/sources/touchlab.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [coding](<https://devfeed.tech/tags/coding.md>), [community](<https://devfeed.tech/tags/community.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [development](<https://devfeed.tech/tags/development.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [experimental](<https://devfeed.tech/tags/experimental.md>), [guide](<https://devfeed.tech/tags/guide.md>), [inclusive](<https://devfeed.tech/tags/inclusive.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlinjs](<https://devfeed.tech/tags/kotlinjs.md>), [kotlinmultiplatform](<https://devfeed.tech/tags/kotlinmultiplatform.md>), [software](<https://devfeed.tech/tags/software.md>)

## AI overview

A guide to exposing Kotlin code to JavaScript through Kotlin/JS using the experimental @JsExport annotation. It explains that Kotlin declarations are hidden from JavaScript by default, demonstrates annotating a Greeting class, and notes that the generated .js and .d.ts files then include the class reference.

## Source excerpt

Note that this post focuses on JS output for Kotlin. There is also a Typescript output (.d.ts file) with some unique issues that this post doesn't cover in detail. In the previous post, we added Kotlin/JS support to an existing KMM library. Now, we would add code that works on the JS side. Table Of Contents Usage @ExperimentalJsExport vs @JsExport Limitations Collections Long Interface Solution - Using Implementation class Solution - Using Expect-Actual Enum Sealed classes Code mangling Suspended functions Usage It is critical to understand @JsExport annotation and all the issues around it if you expose Kotlin code through Kotlin/JS as an external JS library With the new IR compiler, Kotlin declarations do not get exposed to JavaScript by default. To make Kotlin declarations visible to JavaScript, they must be annotated with @JsExport. Note that @JsExport is experimental as of the posted date of this post (with Kotlin 1.6.10) Let's start with a very basic example, // commonMain - Greeting.kt class Greeting { fun greeting(): String { return "Hello World!" } } At this point, the generated .js library file would not have any reference to the Greeting class. The reason is that it is missing the @JsExport annotation. You can generate JS library code via ./gradlew jsBrowserDistribution. You would find the .js, .d.ts and map file in root/build/js/packages/<yourlibname>/kotlin folder. Now, add the annotation to generate JS code for it, import kotlin.js.ExperimentalJsExport import kotlin.js.JsExport @ExperimentalJsExport @JsExport class Greeting { fun greeting(): String { return "Hello World!" } } The .js and .d.ts files would now contain the Greeting reference. Generated .js file ```javascript function Greeting() { } Greeting.prototype.greeting = function () { return 'Hello World!'; }; Greeting.$metadata$ = { simpleName: 'Greeting', kind: 'class', interfaces: [] }; - **Generated .d.ts file** ```typescript export namespace jabbar.jigariyo.kmplibrary { class Greeting { constr