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
Step 1: Install the SDK
@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 inlocalStorage or session storage.
Step 3: Initialise the Wallet
Create and initialise aUTEXOWallet 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
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
Step 7: Generate an RGB Invoice (Receiver Side)
Step 8: Send an RGB Asset (Sender Side)
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
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 usingcreateLightningInvoice 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.
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 sameUTEXOWallet 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