> ## Documentation Index
> Fetch the complete documentation index at: https://docs.musterbox.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Web (JS/TS/WebAssembly)

> Integrate the MusterBox web SDK — @musterbox/sdk-js over @musterbox/sdk-wasm.

The web SDK is a TypeScript/JavaScript wrapper (`@musterbox/sdk-js`,
`@musterbox/sdk-ts`) over the compiled core (`@musterbox/sdk-wasm`). The API
is camelCase and mirrors the native surface. Language baseline **ES2020**.

## Install

```bash theme={"dark"}
# dist/javascript/musterbox-sdk-js-1.0.0.tgz
# dist/javascript/musterbox-sdk-ts-1.0.0.tgz
# dist/javascript/musterbox-sdk-wasm-1.0.0.tgz
npm install ./musterbox-sdk-js-1.0.0.tgz ./musterbox-sdk-wasm-1.0.0.tgz
```

<Note>Publication to the public npm registry is not live yet — vendor the tarball and pin 1.0.0.</Note>

## Create a MusterBox instance

```ts theme={"dark"}
import { createMusterBox } from "@musterbox/sdk-js";

const box = createMusterBox({
  gameId: "my-arena-game",
  gameKey: "gk_...",
  environment: "sandbox",
});
```

## Lifecycle

```ts theme={"dark"}
box.addEventListener("ready", async () => {
  await box.authenticate({ identifier: "player@example.com", password: "secret" });

  const session = await box.openSession("sandbox", 1042);

  await box.submitResult("sandbox", 1042, "PLAYER_A_WIN", boardHash);

  box.submitEvent("match.start", { mode: "arena" });
  const evts = await box.pollEvents(64);

  console.log(box.getStatus());
  console.log(box.getDiagnostics());

  box.logout();
  box.destroy();
});
```

## API surface (camelCase)

| Method                                                    | Purpose                                    |
| --------------------------------------------------------- | ------------------------------------------ |
| `createMusterBox(config)`                                 | Build an instance (per-instance lifecycle) |
| `authenticate({identifier, password})`                    | Player login                               |
| `refreshToken()`                                          | Manual token rotation                      |
| `logout()`                                                | Revoke and clear session                   |
| `openSession(environment, matchId)`                       | Issue a match session                      |
| `submitResult(environment, matchId, outcome, boardHash?)` | Claim a result                             |
| `submitEvent(kind, payload)`                              | Outbound gameplay event                    |
| `pollEvents(max)`                                         | Inbound realtime events                    |
| `tick(...)`                                               | Manual frame-driven progress               |
| `getStatus()` / `getDiagnostics()`                        | Status and health                          |

## Event listeners

```ts theme={"dark"}
box.addEventListener("event", (evt) => {
  if (evt.data.type === "wallet") { /* wallet update */ }
});
```

## Security

* The game key is **public by design** here: it must be origin-bound, and the
  browser is never the source of truth for outcomes or purchases.
* Token refresh happens inside the wrapper — your code never touches JWT.
* WebGL/HTML5 builds from Unity and Defold reuse the same core through their
  own bridges (available in the packaged templates).

## Support matrix

| Platform        | SDK   | Packages                                                        |
| --------------- | ----- | --------------------------------------------------------------- |
| ES2020 browsers | 1.0.0 | `@musterbox/sdk-js`, `@musterbox/sdk-ts`, `@musterbox/sdk-wasm` |

Next: [Secure purchases](/sdk/purchases).