Demo Setup
The interactive demos require three things running together: the FabricVault extension, a Fabric network, and the JSON-RPC gateway.
Prerequisites
1. FabricVault Extension
Install the extension in your browser and configure it with at least one peer and one identity before opening any demo page.
Adding a peer (Dashboard → Peers tab):
- Name — e.g.
peer0.org1.example.com - Endpoint — e.g.
localhost:7051 - RPC URL — e.g.
ws://localhost:7545(self-hosted) orwss://hyperledger-fabric-json-rpc-gateway.onrender.com(public, free plan) - TLS CA Certificate — import the
.crtfile for the peer
For Fabric Samples users, the TLS CA cert for peer0.org1.example.com is at:
fabric-samples/test-network/organizations/peerOrganizations/org1.example.com/
peers/peer0.org1.example.com/tls/ca.crtAdding an identity (Dashboard → Identities tab):
- Label — a unique name for this identity
- MSP ID — e.g.
Org1MSP - Certificate — import the
.pemcert file - Private key — paste the key contents
For Fabric Samples users:
# Certificate
fabric-samples/test-network/organizations/peerOrganizations/org1.example.com/
users/User1@org1.example.com/msp/signcerts/User1@org1.example.com-cert.pem
# Private key (filename ends with _sk)
fabric-samples/test-network/organizations/peerOrganizations/org1.example.com/
users/User1@org1.example.com/msp/keystore/<YOUR_PRIVATE_KEY_FILE>After adding both, select an active peer and identity in the dashboard.
2. Hyperledger Fabric Network
Your network must be running and accessible from the browser's host machine. The demo pages default to mychannel and the basic asset transfer chaincode from the Fabric Samples test network.
3. JSON-RPC Gateway
The gateway bridges the browser to your Fabric peers. See the Getting Started guide for setup instructions.
The demo pages must be served over HTTP or HTTPS — the extension's injected API is not available on
file://pages. If running from a local clone, serve thepublic/examples/directory with any HTTP server, e.g.python -m http.server 8000, then openhttp://localhost:8000/test2.html.
Using the Demo Pages
test2.html — Full API Harness
- Connect Wallet — triggers
fabric_requestIdentities, prompting the extension to grant this page access to your identities - Get Identities — fetches available identities and populates the identity dropdown; select one before running transactions
- Specific Transactions — pre-built calls using the
basicchaincode (GetAllAssets,TransferAsset) - Generic Transaction Builder — enter channel, chaincode, function, and args to execute any transaction
- Event Subscriptions — subscribe to block or chaincode events on
mychannel
The Output & Events panel logs all responses and incoming events with timestamps. Use Clear to reset it.
test.html — Basic Connect Demo
Simpler page with individual buttons for connect, get identities, evaluate, submit, block subscribe, and chaincode subscribe. Useful for quickly verifying each API call works.
discovery.html — Provider Discovery Demo
Demonstrates the fabric:requestProvider / fabric:announceProvider event protocol. Lists discovered providers and lets you connect to each.