Skip to main content

​
Package Manager

Hermis supports all major Node.js package managers. Choose the one you prefer:
  • npm
  • yarn
  • pnpm
npm install @hermis/solana-headless-react

​
Available Packages

​
Adapter Base

Vanilla JavaScript implementation with TypeScript support. This is the foundation package that works with any JavaScript/TypeScript framework.
  • npm
  • yarn
  • pnpm
npm install @hermis/solana-headless-adapter-base
Use when:
  • Building with vanilla JavaScript or TypeScript
  • Using Other frameworks (Vue, Svelte, Angular, etc.)
  • Creating custom wallet adapters
  • Extending existing adapters
  • Need maximum flexibility and framework independence

​
React Package

React hooks and providers for seamless integration with React applications.
  • npm
  • yarn
  • pnpm
npm install @hermis/solana-headless-react
Use when:
  • Building React applications
  • Want React-specific hooks and context
  • Need automatic state management

​
Vue Package

Vue support is coming soon! Star our GitHub repo to get notified when it’s released.

​
TypeScript Support

All packages include TypeScript definitions out of the box. No additional @types packages are needed.

​
Framework-Specific Setup

​
Next.js

For Next.js 13+ with App Router: 
npm install @hermis/solana-headless-react
Create a client component for the provider:
app/providers.tsx
'use client';

import { HermisProvider } from '@hermis/solana-headless-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HermisProvider network="mainnet-beta">
      {children}
    </HermisProvider>
  );
}

​
Vite

For Vite projects, install the polyfills: 
npm install --save-dev @esbuild-plugins/node-globals-polyfill
Update your vite.config.ts: 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
    },
  },
});

​
Verifying Installation

After installation, verify everything works: For Adapter Base: 
import { WalletAdapterManager, getStandardWalletAdapters } from '@hermis/solana-headless-adapter-base';

// Auto-detect wallet-standard compatible wallets
const wallets = []; // Add custom wallet adapters here if needed
const adapters = getStandardWalletAdapters(wallets);
const manager = new WalletAdapterManager(adapters);
console.log('Hermis Adapter Base initialized successfully!');
For React: 
import { HermisProvider } from '@hermis/solana-headless-react';

function App() {
  return (
    <HermisProvider>
      <YourApp />
    </HermisProvider>
  );
}

console.log('Hermis React initialized successfully!');

​
Troubleshooting

If you see module not found errors, ensure all required packages are installed. Check the package documentation for any peer dependencies that may be needed for your specific use case.
This is common in browser environments. Add buffer polyfill:
npm install buffer
Then import at the top of your entry file:
import { Buffer } from 'buffer';
window.Buffer = Buffer;
All packages include TypeScript definitions. If you encounter errors, ensure you’re using a recent version of TypeScript.
Webpack 5 no longer includes Node.js polyfills by default. You’ll need to configure them manually in your webpack config.

​
Next Steps

Getting Started

Learn how to configure and use the SDK

Quick Start - React

Jump into a React quick start guide