Skip to main content

Installation

Install the Hoosat Browser SDK in your web application.

Prerequisites​

  • Node.js 16+ (for build tools)
  • TypeScript 5+ (optional, but recommended)
  • Modern browser with ES6+ support

NPM Installation​

npm install hoosat-sdk-web

Or with yarn:

yarn add hoosat-sdk-web

Or with pnpm:

pnpm add hoosat-sdk-web

CDN Usage​

For quick prototyping, use the UMD bundle via CDN:

<script src="https://unpkg.com/hoosat-sdk-web@latest/dist/hoosat-sdk.umd.js"></script>
<script>
  const { HoosatCrypto, HoosatWebClient } = window.HoosatSDK;

  // Use the SDK
  const wallet = HoosatCrypto.generateKeyPair('mainnet');
  console.log('Address:', wallet.address);
</script>

Module Bundlers​

Vite​

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // No special configuration needed
  // hoosat-sdk-web works out of the box with Vite
});

Webpack​

// webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/'),
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
};

Create React App​

npm install hoosat-sdk-web buffer
// src/index.tsx
import { Buffer } from 'buffer';

window.Buffer = Buffer;

// Now you can use the SDK
import { HoosatCrypto } from 'hoosat-sdk-web';

TypeScript Configuration​

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Verify Installation​

Create a test file to verify the SDK works:

// test-sdk.ts
import { HoosatCrypto, HoosatUtils } from 'hoosat-sdk-web';

// Generate test wallet
const wallet = HoosatCrypto.generateKeyPair('testnet');

console.log('SDK installed successfully!');
console.log('Test wallet address:', wallet.address);
console.log('Network:', HoosatUtils.getAddressNetwork(wallet.address));

Run the test:

npx tsx test-sdk.ts

Browser Compatibility​

BrowserMinimum VersionStatus
Chrome90+Fully supported
Firefox88+Fully supported
Safari14+Fully supported
Edge90+Fully supported
Opera76+Fully supported
Mobile SafariiOS 14+Fully supported
Chrome MobileAndroid 90+Fully supported

Common Issues​

Buffer not defined​

If you see Buffer is not defined error:

// Add at the top of your entry file
import { Buffer } from 'buffer';
globalThis.Buffer = Buffer;

Module not found​

Ensure you're using a bundler that supports ES modules (Vite, Webpack 5, etc.)

Next Steps​