The WebAssembly Text Format

WA offers a notation which can be used to write human-readable code, compiled to WASM. This so called WebAssembly Text Format looks a little similar to Assembler, which you might have seen before.

Installing needed tools

For compiling your WAT code to WASM, I recommend using wat2wasm.

Installing with NPM: npm install -g wat-wasm Installing it with brew: brew install wabt

Alternatively, check out: https://github.com/webassembly/wabt

Writing a small program with WAT

(module
  (func (export "sum")
    (param $a i32)
    (param $b i32)
    (result i32)
    local.get $a
    local.get $b

    i32.add
  )
)

Compiling it:

wat2wasm add.wat -o add.wasm

Running it with node.js

Now, we can load this file in Node.js and use the function:

const fs = require('fs')
const bytes = fs.readFileSync(__dirname + '/add.wasm')

(async () => {
  const obj = await WebAssembly.instantiate(new Uint8Array(bytes))

  let value = obj.instance.exports.sum(7, 5)
  console.log(value)
})()

node index.js should log “12” now.

Running it in the browser

All you have to do, is to write the following JavaScript code and use it in the browser, so embed it in your HTML or you the .

fetch('add.wasm')
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes))
  .then((response) => {
    let result = response.instance.exports.sum(7, 5)
    console.log(result)
  })

Understanding the stack machine

(module
  (func (param i32) (param i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
)

We can access the parameters via index or via name. via index would look like this: local.get 0 and local.get 1.

Getting them via name is shown in the first code example.

The add-function takes the top-2 elements, removes them from the stack and push the result on the stack.

Writing comments

;; This is a single line comment

(; Multiline
Comment ;)

Data types

For now, there are integers and floats, defined by the size in memory: i32, i64, f32, f64