---
title: Getting Started with Browser/ESM
description: A quick start guide for using Sonr in web browsers with WebAuthn integration
sidebarTitle: Browser Quickstart
icon: "globe"
---
This guide will walk you through creating a simple web application that interacts with the Sonr network directly from the browser. We will use the Sonr JavaScript SDK to create a new user identity, claim a Vault, and send a transaction.
## Prerequisites
- A local Sonr network running. See the [Validator Setup Guide](/quickstart/validators) for instructions
- A modern web browser with WebAuthn support (Chrome, Firefox, Safari, Edge)
## 1. Project Setup
### Create an HTML File
Create a new `index.html` file and add the following basic structure:
```html
Sonr Browser Quickstart
Sonr Browser Quickstart
```
### Create a JavaScript File
Create a new `app.js` file in the same directory. This is where we will write our application logic.
### Install the Sonr SDK
For this quickstart, we will use the Sonr SDK from a CDN. Add the following script tag to the `` of your `index.html` file:
```html
```
## 2. Creating an Identity
Now, let's add the logic to create a new user identity and claim a Vault.
### Add Event Listener
In `app.js`, add an event listener to the "Create Identity" button:
```javascript
document
.getElementById("create-identity")
.addEventListener("click", async () => {
const output = document.getElementById("output");
output.innerHTML = "Creating identity...";
try {
// Code to create identity will go here
} catch (error) {
output.innerHTML = `Error: ${error.message}`;
}
});
```
### Implement Identity Creation
Inside the event listener, use the `WebAuthn.createCredential` method to create a new WebAuthn credential and the `Sonr.claimVault` method to claim a new Vault on the network.
```javascript
// Inside the try block
const credential = await WebAuthn.createCredential({
rp: { name: "Sonr Quickstart" },
user: {
id: new Uint8Array(16), // Should be a unique user ID
name: "user@example.com",
displayName: "Test User",
},
});
output.innerHTML = `Credential created: ${credential.id}`;
const sonr = new Sonr({ httpUrl: "http://localhost:1317" });
const vault = await sonr.claimVault(credential);
output.innerHTML = `Vault claimed! DID: ${vault.did}`;
```
In a real application, the user ID should be a unique and stable identifier
for the user, not a random value.
## 3. Running the Application
To run the application, you need a simple web server. You can use the `http-server` package for this.
```bash
# Install http-server
npm install -g http-server
# Start the server
http-server
```
Now, open your browser and navigate to `http://localhost:8080`. When you click the "Create Identity" button, your browser will prompt you to create a new passkey using your device's biometrics or a security key.
## 4. Sending a Transaction
Once you have a Vault, you can use it to send transactions.
### Add a Send Button
Add a new button to your `index.html` file:
```html
```
### Implement Transaction Sending
In `app.js`, add an event listener to the new button. This will use the `sonr.send` method to send a transaction.
```javascript
let vaultInstance;
// After claiming the vault...
vaultInstance = vault;
document.getElementById("send-transaction").disabled = false;
document
.getElementById("send-transaction")
.addEventListener("click", async () => {
const output = document.getElementById("output");
output.innerHTML = "Sending transaction...";
try {
const result = await vaultInstance.send({
to: "snr1..._recipient_address_...",
amount: "1000000usnr", // 1 SNR
});
output.innerHTML = `Transaction successful! TxHash: ${result.txhash}`;
} catch (error) {
output.innerHTML = `Error: ${error.message}`;
}
});
```
## Next Steps
Congratulations! You have successfully created a web application that interacts with the Sonr network. From here, you can explore more advanced features:
- **Service Registration**: Register your application as a trusted service on the network
- **UCAN Authorization**: Request and manage user permissions for your application
- **Cross-Chain Operations**: Interact with other blockchains through IBC