Demo Compiling from WAT to WASM

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

Note

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:

Platform	Install Command
macOS	`brew install wabt`
Windows	`choco install wabt`
Linux	`sudo apt-get install wabt` (Debian/Ubuntu)

Note

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:

Fetches the .wasm binary
Instantiates it with an imported console.log function
Retrieves the exported memory and calls main()

5. Run and Verify

Start your local HTTP server in the project folder.
Open http://localhost:PORT/hello-wasm.html in your browser.
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.