Fiber Docs
Download projectRun a Fiber WASM Node in Your Browser
Start a real Fiber node in this page, connect it to a public Fiber Testnet peer, and inspect its runtime state. No installation, wallet, Testnet funds, or backend is required.
Start your browser node. Select Start WASM node, then wait for Node running and a public key. The node starts locally and remains disconnected.
Connect to Fiber Testnet. Select Connect public peer, then wait for the public-peer status to show a successful connection.
Waiting for nodewasm_runtimecheckingnode_stateReady to startBehind the scenes
See how the browser runs the node, why it needs browser isolation, and which Fiber SDK APIs power each action in the demo.
How the browser node works
The page starts the WebAssembly version of Fiber in Web Workers. The workers exchange data through SharedArrayBuffer, while IndexedDB stores local node data. The node reaches the public Fiber peer over WSS.
@fiber-pay/sdk provides the browser-facing APIs used here to create the node, manage its identity, observe its state, and connect it to peers. Install it in an existing TypeScript or JavaScript project with:
npm install @fiber-pay/sdkWhy the page needs COOP and COEP
Browsers restrict shared memory to pages that opt into cross-origin isolation. This example enables it with two response headers: COOP and COEP.
Together, these headers make window.crossOriginIsolated return true, allowing Fiber WASM to use SharedArrayBuffer.
You only need to add these headers when running the project on your own server.
Start the node without connecting
Before creating the node, verify that crossOriginIsolated is enabled. Then create a credential and initialize a Fiber Testnet node with an empty bootnodes list so it starts without connecting to a peer. Register the stateChange listener before calling node.start() to receive startup updates.
The generated credentials are intended for Testnet development only. Production applications must store private keys in encrypted storage and provide backup, account-switching, and recovery mechanisms.
Connect the node to a public peer
The browser node needs both an address and a pubkey to make its first connection. The address tells it how to reach the public Fiber Testnet peer over WSS; the pubkey identifies the Fiber node it expects to reach.
addressBrowser route/dns4/bottle.fiber.channel/tcp/443/wss/p2p/QmXen3eUHhywmutEzydCsW4hXBoeVmdET2FJvMX69XJ1Eo/dns4/bottle.fiber.channel// DNS host/tcp/443// TCP port/wss// encrypted WebSocket/p2p/Qm...// libp2p peer IDpubkeyFiber identity0x02b6d4e3ab86a2ca2fad6fae0ecb2e1e559e0b911939872a90abdda6d20302be71// Hex-encoded secp256k1 Fiber node public keyconnectToRouter(node) passes both values to node.connectPeer({ address, pubkey }), allowing the first connection to use the explicit WSS route without depending on graph synchronization.
Keep the node between renders
useRef() keeps one node instance available across React renders without triggering extra renders. React state stores the status, public key, and peer count displayed by the interface.
Start the WASM node
start() calls startFiber(), saves the returned node in a React ref, then calls getNodeInfo() and stores the public key in React state. It does not connect to a peer.
Connect the running node to Testnet
connect() calls connectToRouter(), then calls listPeers() and stores the connected-peer count in React state so the interface can confirm the connection.
Show the result
FiberPage() gives users visible confirmation of each operation. It binds the handlers to separate buttons and displays the node status, public key, and peer count.
Run the complete project locally
Select Download project in the top-right corner, or download here. The archive already contains the Next.js application, Fiber integration, browser headers, and interface shown here. After extracting it, open the project directory and run:
npm install
npm run devThen open http://localhost:3000/fiber in your browser.