boxlang-runtime-wasm-in-the-browserlisted
Install: claude install-skill ortus-boxlang/skills
# BoxLang WASM in the Browser
## Overview
MatchBox can compile BoxLang source to browser-compatible output via two modes:
| Mode | Flag | Output | Best For |
|------|------|--------|---------|
| ES Module (recommended) | `--target js` | `.js` + `.wasm` | Browsers, Node.js, bundlers |
| Raw WASM | `--target wasm` | `.wasm` | Custom loaders, advanced bundling |
All top-level BoxLang functions are automatically exported, regardless of access modifier.
---
## Mode 1: `--target js` — ES Module (Recommended)
```bash
matchbox --target js my_lib.bxs
# Output: my_lib.js + my_lib.wasm
```
The generated `.js` file is an ES module wrapper. The `.wasm` file is loaded automatically.
### Browser Usage
```html
<!DOCTYPE html>
<html>
<head>
<title>BoxLang in the Browser</title>
</head>
<body>
<script type="module">
import { greet, calculateTotal } from './my_lib.js'
const message = greet("World")
document.getElementById("output").textContent = message
const total = calculateTotal([ 10.99, 5.49, 3.00 ])
console.log("Total:", total)
</script>
<div id="output"></div>
</body>
</html>
```
### BoxLang source (`my_lib.bxs`)
```js
// All top-level functions are exported automatically
function greet( name ) {
return "Hello, " & name & "!"
}
function calculateTotal( prices ) {
return prices.reduce( ( sum, price ) -> sum + price, 0 )
}
```
### Node.js Usage
```js
// node-app.mjs
import { greet, calculateTotal } from './my_