mfahampshire
7c890ea0c5
* First sweep packages + some minor tweaking * Second sweep * Regenerate lockfile + package.json mods * Regenerate lockfile again * Fix CI * Fix CI again * All building properly * unblock * Tweak examples * Comments + readme + fix rotten unit test * First pass docs * Big pass * Massive pass on new docs * Update integrations.md w mobile * Partial overhaul review * new playground + big pass * new fix lychee err * IPR notice tweak
60 lines
3.3 KiB
Plaintext
60 lines
3.3 KiB
Plaintext
---
|
|
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).
|