Skip to main content

Documentation Index

Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt

Use this file to discover all available pages before exploring further.

In this guide, you’ll learn how to write a simple WebAssembly Text Format (WAT) module, compile it into a WASM binary using the WebAssembly Binary Toolkit (WABT), and load it in an HTML page. By the end, you’ll see “Hello, WebAssembly!” printed in your browser console.

​
Prerequisites

  • A modern web browser
  • A local HTTP server (e.g., VS Code Live Server, python -m http.server, http-server)
  • Node.js or another environment to run a local server
You cannot load a WASM module via file://. Always serve your files over HTTP or HTTPS.

​
1. Write the WAT Module

Create a file named hello-wasm.wat: 
(module
  (import "console" "log" (func $log (param i32)))
  (memory 1)
  (export "memory" (memory 0))
  (data (i32.const 0) "Hello, WebAssembly!\00")
  (func $main
    (i32.const 0)
    call $log)
  (export "main" (func $main))
)
This module:
  • Imports the JavaScript console.log function
  • Allocates 1 page (64 KiB) of memory
  • Stores the null-terminated string "Hello, WebAssembly!" at offset 0
  • Defines a main function that pushes the string offset and calls log

​
2. Install the WebAssembly Binary Toolkit (WABT)

WABT provides the wat2wasm compiler. Install it on your platform:
PlatformInstall Command
macOSbrew install wabt
Windowschoco install wabt
Linuxsudo apt-get install wabt (Debian/Ubuntu)
For other distributions, visit the WABT GitHub releases page.

​
3. Compile WAT to WASM

Run the following command in the directory containing hello-wasm.wat: 
wat2wasm hello-wasm.wat -o hello-wasm.wasm
After compilation, you’ll see hello-wasm.wasm in your working folder.

​
4. Create the HTML Loader

Make an hello-wasm.html file alongside your .wasm binary: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello WASM</title>
</head>
<body>
  <script>
    let memory;

    fetch('hello-wasm.wasm')
      .then(res => res.arrayBuffer())
      .then(bytes =>
        WebAssembly.instantiate(bytes, {
          console: {
            log: offset => {
              const bytes = new Uint8Array(memory.buffer, offset);
              const message = new TextDecoder().decode(bytes);
              console.log(message);
            }
          }
        })
      )
      .then(result => {
        memory = result.instance.exports.memory;
        result.instance.exports.main();
      })
      .catch(err => console.error('WASM error:', err));
  </script>
</body>
</html>
This loader:
  1. Fetches the .wasm binary
  2. Instantiates it with an imported console.log function
  3. Retrieves the exported memory and calls main()

​
5. Run and Verify

  1. Start your local HTTP server in the project folder.
  2. Open http://localhost:PORT/hello-wasm.html in your browser.
  3. Check the developer console. You should see: 
    Hello, WebAssembly!
Congratulations! You’ve successfully written a WAT file, compiled it to WASM, and run it in a browser.

​
References

Watch Video

Practice Lab