What is the difference between .wasm and .wat files?

Question

Accepted Answer

The .wasm and .wat file extensions represent two different views of the same WebAssembly module: .wasm is the compact binary format that browsers execute, while .wat (WebAssembly Text Format) is a human-readable, S-expression-based syntax designed for developers to read, write, and debug Wasm code. Think of the relationship like that between a compiled .exe file and the original source code—they represent the same program but serve entirely different purposes. **Binary encoding**: .wasm files contain a dense binary format where instructions, types, and sections are encoded as bytes for efficient transmission and decoding . **Compact size**: The binary format is typically 20-50% smaller than equivalent minified JavaScript, and 10-20x smaller than .wat text . **Fast decoding**: Browsers can validate and decode .wasm in a single linear pass, streaming compilation as the file downloads . **Not human-readable**: Opening a .wasm file in a text editor shows gibberish—it's meant for machines, not humans . **Magic number**: All .wasm files start with the byte sequence `0x00 0x61 0x73 0x6d` (\0asm) to identify them as WebAssembly modules . // Hex dump of a minimal .wasm file
// This module exports an add function

00000000: 00 61 73 6d                             ; \0asm magic number
00000004: 01 00 00 00                             ; Version 1

// Type section
00000008: 01                                       ; Section ID 1 (Type)
00000009: 07                                       ; Section size 7
0000000a: 01                                       ; 1 type
0000000b: 60 02 7f 7f 01 7f                       ; func type (i32,i32)->i32

// Function section
00000012: 03                                       ; Section ID 3 (Function)
00000013: 02                                       ; Section size 2
00000014: 01                                       ; 1 function
00000015: 00                                       ; type index 0

// Export section
00000016: 07                                       ; Section ID 7 (Export)
00000017: 08                                       ; Section size 8
00000018: 01                                       ; 1 export
00000019: 03 61 64 64 00 00                        ; name "add", func index 0

// Code section
0000001e: 0a                                       ; Section ID 10 (Code)
0000001f: 06                                       ; Section size 6
00000020: 01                                       ; 1 function body
00000021: 04                                       ; body size 4
00000022: 00 20 00 20 01 6a 0b                     ; local.get 0, local.get 1, i32.add, end **S-expression syntax**: .wat uses Lisp-like parentheses to express nested structures: `(module (func $add (param i32 i32) (result i32) (i32.add (local.get 0) (local.get 1))))` . **Human-readable**: Designed for developers to read, write, and debug. You can author .wat directly and assemble it to .wasm using tools like `wat2wasm` . **One-to-one mapping**: Every .wat file can be assembled to an equivalent .wasm binary, and any .wasm can be disassembled back to .wat (though variable names may be lost) . **Debugging aid**: Browser DevTools can display .wasm modules as .wat, making it possible to step through Wasm code during debugging . **Two syntax flavors**: The official spec uses folded S-expressions, but an alternate 'flat' syntax also exists (though less common) . ;; .wat format (WebAssembly Text)
;; Human-readable, editable
(module
  ;; Import JavaScript console.log
  (import "console" "log" (func $log (param i32)))
  
  ;; Export add function
  (func $add (export "add") (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  
  ;; Export a memory
  (memory (export "mem") 1)
)

// The same module compiled to .wasm binary
// Size: ~80 bytes vs 300+ bytes of .wat
// Can be viewed in hex or disassembled back to .wat:
// $ wasm2wat module.wasm > module.wat
//
// The disassembled .wat will be functionally identical
// but may have generic names (like $func0) instead of
// the original $add and $log names (those are lost during
// compilation unless debug symbols are included) **wat2wasm**: Converts .wat to .wasm (part of the WebAssembly Binary Toolkit, WABT) . **wasm2wat**: Disassembles .wasm back to .wat for inspection . **wasm-objdump**: Shows detailed section information from .wasm binaries . **wasm-validate**: Checks if a .wasm file is valid WebAssembly . **wat2wasm demo**: Online playground at https://webassembly.github.io/wabt/demo/wat2wasm/ . **Emscripten**: Compiles C/C++ directly to .wasm (not .wat) . In practice, developers rarely write .wat directly. They write in higher-level languages (Rust, C, Go) and compile to .wasm. However, .wat is invaluable for understanding what the compiler produced, debugging performance issues, and learning WebAssembly internals. When you see a .wat file in a blog post or documentation, it's the equivalent of seeing assembly code in a compiler tut

What is the difference between .wasm and .wat files?

.wasm files are the binary executable format for WebAssembly, while .wat files are the human-readable textual representation, similar to how .exe compares to source code.

Scenario Questions

Follow-up Questions