A production-ready Helius RPC showcase and clonable template for Solana developers. Live demos of core RPC methods with interactive inputs, copy-paste code blocks, and real mainnet data.

• Interactive RPC Demos - Test Helius RPC methods with your own inputs and see real mainnet results
• Copy-Paste Code - Every demo includes TypeScript and cURL code examples ready for your project
• Production Architecture - Modular, deletable features with proper API key protection
• Wallet Integration - Phantom Connect with social login (Google, Apple) and extension support
• Modern Stack - Next.js 16, React 19, @solana/kit 6.x, Tailwind CSS 4
• Dark Mode - Full light/dark theme support
• SEO Ready - JSON-LD structured data, OG images, and sitemap generation

• Node.js 18+ (20+ recommended)
• pnpm 9+
• Helius API key (free tier available)

# Clone the repository
git clone https://github.com/helius-labs/frontend-boilerplate.git
cd frontend-boilerplate

# Install dependencies
pnpm install

# Configure environment variables
cp .env.example .env.local

Add your Helius API key to .env.local:

HELIUS_API_KEY=your_api_key_here

Start the development server:

pnpm dev

Open http://localhost:3000 to see the app.

Security: API keys are server-side only. They're accessed through the /api/rpc proxy - never exposed to the client.

src/
├── app/                    # Next.js App Router
│   ├── (methods)/          # Grouped routes for RPC demos
│   │   ├── get-balances/   # Balance fetching demos
│   │   ├── get-assets/     # Asset metadata demos
│   │   ├── get-transactions/
│   │   └── ...
│   └── api/                # Server-side API routes
│       └── rpc/            # RPC proxy (protects API keys)
├── features/               # Self-contained feature modules
│   ├── get-balance/        # Balance queries
│   ├── get-asset/          # Single asset lookup
│   ├── get-assets-by-owner/# Wallet asset enumeration
│   ├── get-transactions/   # Transaction history
│   ├── phantom-connect/    # Wallet integration & code examples
│   ├── validator-staking/  # Validator list & staking UI
│   ├── program-info/       # Program inspection
│   ├── archival-blocks/    # Historical blocks
│   ├── laserstream/        # Real-time streaming
│   └── demo-framework/     # Shared demo UI components
├── shared/                 # Shared utilities
│   ├── ui/                 # ~26 reusable UI components
│   ├── lib/                # Core libraries (helius-client)
│   └── hooks/              # Shared React hooks
├── providers/              # React context providers
└── types/                  # Global TypeScript declarations

Each feature in src/features/ is self-contained and deletable. Delete any feature folder and the app still builds. Features only import from shared/, never from each other.

Feature structure:

feature-name/
├── components/      # Feature UI components
├── hooks/           # Feature-specific hooks
├── lib/             # Feature utilities & fetch functions
├── types.d.ts       # Feature types
└── index.ts         # Barrel export (public API)

Features export both client and server fetch functions:

// Client-side (uses /api/rpc proxy)
import { fetchAsset } from '@/features/get-asset';

// Server-side (direct Helius SDK)
import { serverFetchAsset } from '@/features/get-asset';

import { useAsset } from '@/features/get-asset';

function AssetDisplay({ mint }: { mint: string }) {
  const { data: asset, isLoading, error } = useAsset(mint);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>{asset.content.metadata.name}</h2>
      <img src={asset.content.files[0]?.uri} alt={asset.content.metadata.name} />
    </div>
  );
}

import { useAllBalances } from '@/features/get-balance';

function WalletBalances({ address }: { address: string }) {
  const { data, isLoading } = useAllBalances(address);

  return (
    <ul>
      <li>SOL: {data?.nativeBalance.lamports}</li>
      {data?.tokens.map(token => (
        <li key={token.mint}>{token.symbol}: {token.amount}</li>
      ))}
    </ul>
  );
}

// app/asset/[id]/page.tsx
import { serverFetchAsset } from '@/features/get-asset';

export default async function AssetPage({ params }: { params: { id: string } }) {
  const asset = await serverFetchAsset(params.id);

  return <AssetDetails asset={asset} />;
}

1. Click the button above or import the repo in Vercel
2. Add HELIUS_API_KEY environment variable
3. Deploy

The app is a standard Next.js application. Deploy to any platform that supports Next.js:

pnpm build
pnpm start

• /api/rpc - Main RPC proxy (protects API keys)
• /api/helius/enhanced - Enhanced API proxy
• /api/laserstream - WebSocket proxy for real-time updates
• /api/laserstream/status - Laserstream configuration status

The src/shared/ui/ directory contains ~26 reusable components:

• Navigation: Header, SubNav, Breadcrumb
• Content: PageContainer, PageHeader, CodeTabs, InfoBox
• Input: Input, FormField, Button
• Display: AddressDisplay, ErrorDisplay
• Wallet: ConnectButton, WalletDropdown

• JSON-LD structured data on all pages
• Dynamic OG images per route
• Sitemap and robots.txt generation
• PWA manifest with icons

See CONTRIBUTING.md for detailed guidelines on:

• Architecture decisions
• Feature module structure
• Code style conventions
• Pull request process

• Helius Documentation - RPC methods and APIs
• Solana Kit Documentation - Modern Solana SDK
• Next.js Documentation - Framework docs
• Tailwind CSS - Styling reference

MIT - see LICENSE for details.

Built with Helius | Powered by Solana