---
title: "Mixnet Playground"
description: "Interactive browser playground for Nym's TypeScript packages: drive fetch, DNS, WebSocket and download traffic through a mixnet tunnel, and send end-to-end messages with the raw messaging SDK."
schemaType: "TechArticle"
section: "Developers"
lastUpdated: "2026-06-09"
---

import { Callout } from 'nextra/components'
import { MixPlayground } from '../../components/playground/MixPlayground'
import { MessagingDemo } from '../../components/playground/messaging-section'

# Mixnet playground

This playground runs Nym's browser TypeScript packages against the live mixnet. It covers both integration models:

- **Proxy**, via the [mix-* family](/developers/mix-tunnel): bring the shared tunnel up once, then drive `fetch`, DNS, WebSocket, stress and file-download traffic through it to clearnet destinations.
- **End-to-end**, via the [raw messaging SDK](/developers/typescript): Sphinx-encrypted messages between two Nym clients, with nothing exiting to the clearnet.

Some sections send the same request over the tunnel and over the clearnet, so you can compare the two.

## HTTPS / DNS / WebSockets

<Callout type="info">
**Watch the Network tab.** Open DevTools → Network before you connect. Once
`setupMixTunnel` reports ready, every tunnel operation here (`mixFetch`,
`mixDNS`, `MixWebSocket`) adds **no new request** to that tab: it is multiplexed
inside the single WebSocket to the entry gateway. Only the *clearnet* comparison
buttons add rows. (Setup also fetches the network topology over HTTPS and
refreshes it periodically, so those nym-api calls and the gateway WebSocket are
the only clearnet requests you will see.) Your real traffic never leaves the
browser as an identifiable, per-destination request.
</Callout>

<Callout type="info">
Everything here runs client-side over the live Nym mixnet. The first
`setupMixTunnel` is slow (a few seconds): it loads the WebAssembly client,
registers a fresh client identity with a gateway, and discovers an IPR exit.
Later calls reuse the tunnel.
</Callout>

<MixPlayground />

## Raw mixnet messaging

The sections above share one smolmix tunnel and exit to the clearnet through an IPR. The [Messaging SDK](/developers/typescript) (`@nymproject/sdk`) is the other model: end-to-end mixnet messages between two Nym clients, where you control both ends and nothing exits to the clearnet. It runs a separate wasm client, so it loads on demand:

<MessagingDemo />

## Source and examples

- [Playground source](https://github.com/nymtech/nym/tree/develop/documentation/docs/components/playground): the React component behind this page (`MixPlayground.tsx` and `lib.ts`).
- [SDK examples](https://github.com/nymtech/nym/tree/develop/sdk/typescript/examples): standalone runnable apps, including a browser example per package ([mix-fetch](https://github.com/nymtech/nym/tree/develop/sdk/typescript/examples/mix-fetch/browser), [mix-dns](https://github.com/nymtech/nym/tree/develop/sdk/typescript/examples/mix-dns/browser), [mix-websocket](https://github.com/nymtech/nym/tree/develop/sdk/typescript/examples/mix-websocket/browser)).

## Per-package docs

For the API of each package, see
[mix-tunnel](/developers/mix-tunnel), [mix-fetch](/developers/mix-fetch),
[mix-dns](/developers/mix-dns), and [mix-websocket](/developers/mix-websocket).