WASM browser Todo app

A minimal browser Todo application written in BoxLang and compiled to WebAssembly. BoxLang owns the app state and state transitions. The HTML shell wires that state into Alpine using the generated window.MatchBox.State(...) helper.

Project Layout

wasm_browser/
├── todo.bxs    ← BoxLang source (state + DOM rendering logic)
└── index.html  ← HTML shell (imports the compiled ES module)

How It Works

matchbox --target js compiles todo.bxs to an ES module (todo.js + todo.wasm).

• BoxLang owns the state and returns plain snapshot structs for the UI.
• The generated browser contract owns readiness and module lookup through window.MatchBox.
• The page owns framework wiring by creating an Alpine store from window.MatchBox.State("todo", ...).

Build

You need the matchbox binary and the wasm-bindgen command-line tool on your PATH (cargo install wasm-bindgen-cli, or set WASM_BINDGEN to its path). wasm-pack is not used.

cd docs/examples/wasm_browser
matchbox --target js todo.bxs

This produces these files alongside your source:

todo.js               ← ES module wrapper (import this in HTML)
todo.wasm             ← WebAssembly binary (loaded automatically by todo.js)
todo.d.ts             ← TypeScript declarations
todo_bg.wasm.d.ts     ← TypeScript declarations for the wasm exports

Run Locally

Browsers block WASM loading over file:// for security reasons. Serve the directory with any local HTTP server:

# Option A - Node.js (npx, no install required)
npx serve .

# Option B - Python
python3 -m http.server 8080

# Option C - any other static file server

Then open the printed URL (usually http://localhost:3000 or http://localhost:8080) in your browser.

Features

• Add a task by typing in the input and pressing Enter or clicking Add.
• Click a task text to toggle it done / undone.
• Click ✕ to remove a task.

Deploy to Production

The compiled output (todo.js, todo.wasm and index.html) is a fully static bundle. Upload it to any static host:

# Vercel
vercel deploy

# Netlify drag-and-drop
# Upload the wasm_browser/ folder to app.netlify.com/drop

Ensure your server sets the correct MIME type for .wasm files:

Content-Type: application/wasm

Most modern hosts (Netlify, Vercel, Cloudflare Pages) handle this automatically.

Key Concepts