Skip to main content

WebAssembly Text Format

WebAssembly Text Format (WAT) is the human-readable text representation of WebAssembly. It uses S-expressions and allows writing low-level code that compiles to the binary Wasm format that browsers execute.

LiveCodes compiles WAT to WebAssembly using wabt.js (the WebAssembly Binary Toolkit).

Usage​

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "template": "wat"
};
createPlayground('#container', options);

Loading the Wasm Module​

The compiled WebAssembly module is loaded using the livecodes.loadWasm() method, which optionally takes an import object and returns a promise that resolves to an object containing the instantiated wasmModule and the raw binary:

const { wasmModule } = await livecodes.loadWasm();
const { increment } = wasmModule.exports;

Import Object​

The import object passed to loadWasm() maps to the imports declared in the WAT module. Functions, memories, and other values can be provided from JavaScript:

WAT
(module
  (import "env" "log" (func $log (param i32)))
  (func (export "run") (call $log (i32.const 42)))
)
JavaScript
const { wasmModule } = await livecodes.loadWasm({
  env: { log: (val) => console.log(val) },
});
wasmModule.exports.run(); // logs 42

For writing strings from Wasm to JavaScript, the shared memory buffer can be accessed via wasmModule.exports.memory and decoded with TextDecoder:

WAT
(module
  (import "title" "change" (func $changeTitle (param i32) (param i32)))
  (memory (export "memory") 1)
  (data (i32.const 0) "Hello, WAT!")
  (func (export "setTitle")
    (call $changeTitle (i32.const 0) (i32.const 11))
  )
)
JavaScript
const { wasmModule } = await livecodes.loadWasm({
  title: {
    change: (offset, length) => {
      const bytes = new Uint8Array(wasmModule.exports.memory.buffer, offset, length);
      const text = new TextDecoder('utf8').decode(bytes);
      document.querySelector('#title').innerText = text;
    },
  },
});
wasmModule.exports.setTitle();

Language Info​

Name​

wat

Aliases​

wast, webassembly, wasm

Extensions​

.wat, .wast, .webassembly, .wasm

Editor​

script

Compiler​

wabt.js (WebAssembly Binary Toolkit)

Version​

wabt: v1.0.35

Code Formatting​

Using wast-refmt.

Custom Settings​

Custom settings added to the property wat are passed as compiler features to the WAT parser. Supported features include simd, threads, bulk_memory, reference_types, and more.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "wat": {
    "threads": false
  }
}

Starter Template​

https://livecodes.io/?template=wat

Sponsors