Build10-minute quickstart

Connect to Fiber with a WASM Node

Run a Fiber node in a React application, connect it to Fiber Testnet over WSS, and monitor its state without a backend service.

ReactFiber WASMNode connection

Architecture

Run the Fiber node in the browser

The Fiber WASM node runs inside the React application rather than on a remote server. Web Workers execute the runtime, IndexedDB stores node data, and WSS connects the browser node to a public Fiber peer.

React appFiber WASM + IndexedDB

→ WSS →

Public Fiber peerTestnet network

Backend requirements

This quickstart runs the Fiber node entirely in the browser and does not require a backend. Applications that issue invoices, verify merchant payments, or manage server-side content can add a backend service as needed.

1 Create the React app

Install the browser SDK

Create a Next.js application and install the Fiber browser SDK. The SDK provides the Fiber WASM runtime and node lifecycle APIs required by the React application.

Terminal

npm create next-app@latest fiber-hello
cd fiber-hello
npm install @fiber-pay/sdk

2 Enable browser isolation

Configure COOP and COEP headers

The Fiber WASM runtime uses SharedArrayBuffer to exchange data between its workers. Browsers expose this API only on cross-origin-isolated pages, so configure COOP and COEP response headers for the /fiber route.

Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp

next.config.mjs · lines 1–24

3 Start Fiber

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 bootnode list so it starts without connecting to a peer. Register the stateChange listener before calling node.start() to receive startup updates.

Testnet only

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.

lib/fiber.ts · lines 13–48

4 Connect to Testnet

Connect the node to a public peer

After the node starts locally, call connectToRouter(node) to connect it to Testnet. Because connectPeer accepts the transport address and public key as separate fields, the helper removes the /p2p/<peer-id> suffix and passes the remaining WSS address with routerPubkey.

lib/fiber.ts · lines 51–56

5.1 Wire it into React

Persist the node across React renders

Store the node instance in a ref so it remains available across renders without triggering rerenders. Store its status, public key, and peer count in React state so changes appear in the interface.

app/fiber/page.tsx · lines 7–11

5.2 Wire it into React

Start the WASM node

The start handler calls startFiber, stores the returned node, and retrieves its public key with getNodeInfo. The public key identifies the running browser node. No peer connection is established at this stage.

app/fiber/page.tsx · lines 13–18

5.3 Wire it into React

Connect the running node to Testnet

After startup, the connect handler passes the stored node to connectToRouter. It then calls listPeers and stores the returned peer count so the interface can confirm the connection.

app/fiber/page.tsx · lines 20–25

5.4 Wire it into React

Display node status and connection results

Bind the start and connect handlers to separate buttons. Display the node status, public key, and peer count so users can verify that the node started and connected successfully.

app/fiber/page.tsx · lines 27–39

1'use client';2 3import { useRef, useState } from 'react';4import type { FiberBrowserNode } from '@fiber-pay/sdk/browser';5import { connectToRouter, startFiber } from '@/lib/fiber';6 7export default function FiberPage() {8  const node = useRef<FiberBrowserNode | null>(null);9  const [status, setStatus] = useState('idle');10  const [pubkey, setPubkey] = useState('');11  const [peers, setPeers] = useState(0);12 13  async function start() {14    const fiber = await startFiber(setStatus);15    node.current = fiber;16    const info = await fiber.getNodeInfo();17    setPubkey(info.pubkey);18  }19 20  async function connect() {21    if (!node.current) return;22    await connectToRouter(node.current);23    const peerList = await node.current.listPeers();24    setPeers(peerList.peers.length);25  }26 27  return (28    <main>29      <p>Fiber WASM · {status}</p>30      <h1>Your Fiber node, inside React.</h1>31      <button onClick={start}>Start node</button>32      <button disabled={!node.current} onClick={connect}>33        Connect peer34      </button>35      {pubkey && <code>{pubkey}</code>}36      <p>{peers} connected peers</p>37    </main>38  );39}

app/fiber/page.tsx tsx

Fiber Testnet

Run the Live Demo

Start the local WASM node, then connect it to a public peer.

Your browser nodeReady to start

Node pubkeyWaiting for node

RuntimeFiber WASM

StorageIndexedDB

TransportWSS

Node events

01wasm_runtimechecking

02node_stateReady to start