# How to call Kotlin WebAssembly functions from JavaScript?

**URL:** <https://discuss.kotlinlang.org/t/how-to-call-kotlin-webassembly-functions-from-javascript/11106>\
**Category:** Native\
**Created:** [January 11, 2019, 12:24am UTC](https://discuss.kotlinlang.org/t/how-to-call-kotlin-webassembly-functions-from-javascript/11106 "2019-01-11T00:24:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mk2301](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@mk2301](https://discuss.kotlinlang.org/u/mk2301)\
**Post date:** [January 11, 2019, 12:24am UTC](https://discuss.kotlinlang.org/t/how-to-call-kotlin-webassembly-functions-from-javascript/11106/1 "2019-01-11T00:24:17Z")

</div>

My goal is to write a Kotlin library, compile it to WebAssembly and call its functions from JS. Since a few hours I try to get a simple hello world to work. The documentation on this topic is either non existent or well hidden.

This is my kotlin file:

```auto
@Used
public fun hello() {
    println("Hello world!")
}

fun main(args: Array<String>) {
    println("main() function executed!")
}

```

When I compile it to WebAssembly, I get a _hello.wasm_ and _hello.wasm.js_ file.

First I tried to use something like this to execute the function:

```auto
WebAssembly.instantiateStreaming(fetch('hello.wasm'), importObject)
    .then(obj => obj.instance.exports.hello());

```

Then I understood that I need to pass the imports from my _hello.wasm.js_ file in the **importObject** parameter. So I guess that I need to use the _hello.wasm.js_ file to correctly initialize my wasm program.

When I load my wasm like the following, I don’t get any errors and the **main()** function is executed.

```auto
<script wasm="hello.wasm" src="hello.wasm.js"></script>

```

But how can I execute the **hello()** function from JavaScript? The only kotlin wasm examples I found are not calling specific functions but rendering something from the **main()** function.

In the end I want to have multiple functions (with parameters and return value) doing heavier calculations which I can call from my JS code if needed. The result is getting more accurate the longer the calculation runs, so I may want to update the DOM every now and then to update the displayed value. Is this even the right approach? Or would I rather create one wasm per calculation function?

Also any links to relevant documentation are very much appreciated.

* * *

**UPDATE:** I managed to execute the function, but I don’t believe this is the correct way:

```auto
<script wasm="hello.wasm" src="hello.wasm.js"></script>
<script>
WebAssembly.instantiateStreaming(fetch('hello.wasm'), konan_dependencies)
        .then(obj => obj.instance.exports['kfun:hello$ValueType']());
</script>

```

The problem is, that my wasm file is fetched two times if I do it like that.

Loading only the hello.wasm.js file without the wasm attribute gets me the following error:

```auto
Uncaught Error: Could not find the wasm attribute pointing to the WebAssembly binary.
    at Object.konan.moduleEntry (stats.wasm.js:433)
    at stats.wasm.js:532

```

---

<div class="post-metadata">

**Author:** ![SOF3](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/sof3/32/5646_2.png) [@SOF3](https://discuss.kotlinlang.org/u/SOF3)\
**Post date:** [February 24, 2019, 7:55am UTC](https://discuss.kotlinlang.org/t/how-to-call-kotlin-webassembly-functions-from-javascript/11106/2 "2019-02-24T07:55:00Z")

</div>

From where is the `@Used` attribute that you are using?