Skip to main content
This guide covers browser-based Web usage. For server-side Node.js see the Node.js guide, and for mobile apps see the React Native guide. For concepts shared across all guides, see the Quickstart Overview.

Prerequisites

  • A modern browser with WebAssembly support (Chrome 87+, Firefox 78+, Safari 14+)
  • A JavaScript bundler (Vite, Webpack, or similar)
  • A testnet BTC balance for transaction fees (see Quickstart Overview for faucet links)
  • Basic familiarity with ES modules and async/await
This guide uses testnet. Never use mainnet keys or real funds while following this tutorial. Testnet assets have no monetary value.

Step 1: Install the SDK

The @utexo/rgb-sdk-web package targets browser environments and is not compatible with Node.js or React Native. It uses WebAssembly for cryptographic operations and browser storage APIs for wallet persistence. For server-side use @utexo/rgb-sdk; for iOS and Android use @utexo/rgb-sdk-rn.
All three Utexo SDK packages (@utexo/rgb-sdk, @utexo/rgb-sdk-rn, @utexo/rgb-sdk-web) share the same UTEXOWallet class and method API via @utexo/rgb-sdk-core. The steps below are identical in structure to the Node.js guide — only the import and storage model differ.

Step 2: Generate Wallet Keys

Generate a BIP-39 mnemonic. In a browser context, store the mnemonic using the Web Crypto API or a dedicated secrets library — never store it unencrypted in localStorage or session storage.
Back up your mnemonic immediately. If a user loses their mnemonic, their wallet and any assets it holds cannot be recovered.

Step 3: Initialise the Wallet

Create and initialise a UTEXOWallet instance. In the browser, wallet state is persisted to IndexedDB by default — you do not need to specify a dataDir.
initialize() performs the initial sync with the Bitcoin indexer and RGB transport layer. This may take a few seconds on first run. Call it once per session after restoring or creating the wallet.

Step 4: Get a Deposit Address

Display this address in your UI or render it as a QR code. Send testnet BTC to this address using one of the faucets listed in the Quickstart Overview. Wait for at least 1 confirmation before continuing.

Step 5: Create UTXOs

RGB asset state must be anchored to Bitcoin UTXOs. Before a user can receive any RGB asset, the wallet needs dedicated UTXOs prepared.

Step 6: Get the USDT on Bitcoin Asset ID

If no assets appear, your wallet may not yet have been assigned any RGB assets. You can also obtain the canonical testnet USDT asset ID from the SDK Reference or by asking in the Utexo Discord.

Step 7: Generate an RGB Invoice (Receiver Side)

Step 8: Send an RGB Asset (Sender Side)

The amount and assetId in the send() call must exactly match those in the invoice. Mismatches will cause the transfer to be rejected by the receiver’s client-side validator.

Step 9: Verify the Transfer

Expected result: the receiver’s asset list shows a balance of 100 for the USDT asset. RGB transfers require Bitcoin confirmation to finalise. If the transfer is still pending, call refreshWallet() again after the next Bitcoin block. On testnet, a new block typically arrives every 1–10 minutes.

Step 10: Lightning

Lightning payments are managed using createLightningInvoice and payLightningInvoice. Channel management requires a funded node connected to a peer.
Opening a channel requires a funded node connected to a peer. Refer to the RGB Lightning Node section for channel management details.
For USDT-over-Lightning payments, set asset.assetId to the USDT asset ID and asset.amount to the RGB amount on the invoice.

Step 11: On-Chain Receive and Send

The same UTEXOWallet instance handles on-chain Bitcoin addresses and RGB on-chain transfers.
getAddress() returns a standard Bitcoin address for on-chain BTC deposits. blindReceive() returns an RGB blinded invoice for asset transfers. Both are available on every UTEXOWallet instance without additional setup.

Web-Specific Notes

Bundler configuration. The @utexo/rgb-sdk-web package includes a WebAssembly binary. Ensure your bundler is configured to handle .wasm files. For Vite, no additional configuration is required. For Webpack, enable experiments.asyncWebAssembly in your config. Storage. Wallet state is persisted to IndexedDB using the wallet’s public key as the storage key. Clearing site data in the browser will destroy wallet state — ensure users have backed up their mnemonic before allowing them to clear browser data. Cross-origin restrictions. The RGB transport layer (rpcs://) uses WebSockets. Ensure your deployment environment does not block outbound WebSocket connections to rgb-proxy-testnet3.utexo.com. Mnemonic storage. Use the Web Crypto API (crypto.subtle) to encrypt the mnemonic before storing it. Never store the raw mnemonic in localStorage, sessionStorage, or cookies.

Troubleshooting

If you encounter an issue not listed here, join the Utexo Discord for community support.

Next Steps

  • SDK Reference — Full method reference for UTEXOWallet, including backup and restore
  • Architecture — Understand how Bitcoin, Lightning, and RGB fit together
  • Glossary — Definitions for RGB, PSBT, blinded invoice, UTXO, and other key terms