user1142: I'm building a simple website with pure HTML and JS (no React, Angular, etc.). I use Nami to connect to a Cardano wallet and use the Nami's cardano.getBalance() method to get the balance of the wallet.
This output (as most of the outputs of Nami) is CBOR encoded. I used https://cbor.me/ to decode it manually but I need to be able to do this in code to be able to work with the values.
Nami's README says to use the cardano-serialization-lib to do this. So I tried to use it but there is no documentation on how to actually use it.
Here's what I've done so far:
<html>
  <head>
    <!-- Cardano Serialization Lib -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib_bg.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.asm.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.min.js"
    ></script>
  </head>
  <body>
    <script>
      function f() {
        window.cardano.enable().then((a) => {
          console.log(a);
          window.cardano.getBalance().then((b) => console.log(b));
        });
      }
      setTimeout(f, 1000); // wait for cardano object to be injected
    </script>
  </body>
</html>


I included the cardano-serialization-lib-browser using jsdelivr.com. Now the goal is to use this library to deserialize the output of cardano.getBalance().
My problems are:

I don't know how to call the library in my JS code.
I don't know what functions to use to deserialize CBOR as there is no documentation.

Any help would be highly appreciated.

user1142: With the help of Samuel's answer, I have been able to get it running.
Some important things I didn't know:

import from CDN has to be done with the full url.
The library has to be imported inside of my script, not in the <head>.

Here's the working example:
<html>
  <head>
    <!-- Cardano Serialization Lib -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib_bg.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.asm.min.js"
    ></script>
  </head>
  <body>
    <script type="module">
      import * as wasm from "https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.min.js";

      function hexToBytes(hex) {
        for (var bytes = [], c = 0; c < hex.length; c += 2)
          bytes.push(parseInt(hex.substr(c, 2), 16));
        return bytes;
      }

      function f() {
        console.log("hello");
        window.cardano.enable().then((a) => {
          console.log(a);
          window.cardano.getBalance().then((res) => {
            const balance = wasm.Value.from_bytes(hexToBytes(res));
            const lovelaces = balance.coin().to_str();

            console.log(lovelaces);
          });
        });
      }
      setTimeout(f, 1000);
    </script>
  </body>
</html>



1142: <p>I'm building a simple website with pure HTML and JS (no React, Angular, etc.). I use Nami to connect to a Cardano wallet and use the Nami's <code>cardano.getBalance()</code> method to get the balance of the wallet.</p>
<p>This output (as most of the outputs of Nami) is CBOR encoded. I used <a href="https://cbor.me/" rel="nofollow noreferrer">https://cbor.me/</a> to decode it manually but I need to be able to do this in code to be able to work with the values.</p>
<p><a href="https://cbor.me/" rel="nofollow noreferrer">Nami's README</a> says to use the <a href="https://github.com/Emurgo/cardano-serialization-lib" rel="nofollow noreferrer">cardano-serialization-lib</a> to do this. So I tried to use it but there is no documentation on how to actually use it.</p>
<p>Here's what I've done so far:</p>
<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;!-- Cardano Serialization Lib --&gt;
    &lt;script
      type=&quot;module&quot;
      src=&quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib_bg.min.js&quot;
    &gt;&lt;/script&gt;
    &lt;script
      type=&quot;module&quot;
      src=&quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.asm.min.js&quot;
    &gt;&lt;/script&gt;
    &lt;script
      type=&quot;module&quot;
      src=&quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.min.js&quot;
    &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script&gt;
      function f() {
        window.cardano.enable().then((a) =&gt; {
          console.log(a);
          window.cardano.getBalance().then((b) =&gt; console.log(b));
        });
      }
      setTimeout(f, 1000); // wait for cardano object to be injected
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

</code></pre>
<p>I included the <a href="https://www.jsdelivr.com/package/npm/@emurgo/cardano-serialization-lib-browser" rel="nofollow noreferrer">cardano-serialization-lib-browser</a> using jsdelivr.com. Now the goal is to use this library to deserialize the output of <code>cardano.getBalance()</code>.</p>
<p>My problems are:</p>
<ol>
<li>I don't know how to call the library in my JS code.</li>
<li>I don't know what functions to use to deserialize CBOR as there is no documentation.</li>
</ol>
<p>Any help would be highly appreciated.</p>
 1142: <p>With the help of Samuel's answer, I have been able to get it running.</p>
<p>Some important things I didn't know:</p>
<ul>
<li><code>import</code> from CDN has to be done with the full url.</li>
<li>The library has to be imported inside of my script, not in the <code>&lt;head&gt;</code>.</li>
</ul>
<p>Here's the working example:</p>
<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;!-- Cardano Serialization Lib --&gt;
    &lt;script
      type=&quot;module&quot;
      src=&quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib_bg.min.js&quot;
    &gt;&lt;/script&gt;
    &lt;script
      type=&quot;module&quot;
      src=&quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.asm.min.js&quot;
    &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script type=&quot;module&quot;&gt;
      import * as wasm from &quot;https://cdn.jsdelivr.net/npm/@emurgo/cardano-serialization-lib-asmjs@9.1.2/cardano_serialization_lib.min.js&quot;;

      function hexToBytes(hex) {
        for (var bytes = [], c = 0; c &lt; hex.length; c += 2)
          bytes.push(parseInt(hex.substr(c, 2), 16));
        return bytes;
      }

      function f() {
        console.log(&quot;hello&quot;);
        window.cardano.enable().then((a) =&gt; {
          console.log(a);
          window.cardano.getBalance().then((res) =&gt; {
            const balance = wasm.Value.from_bytes(hexToBytes(res));
            const lovelaces = balance.coin().to_str();

            console.log(lovelaces);
          });
        });
      }
      setTimeout(f, 1000);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

</code></pre>
