Quickstart

This guide will get you streaming Solana data in under 5 minutes. We’ll connect to a live stack and display real-time updates.

This quickstart uses the Ore mining stack as an example. You can follow the same pattern with any Hyperstack deployment.

Choose your path

Select your preferred framework to get started:

React
TypeScript
Rust

React quickstart

Build a React application that streams live Ore mining data.

Install dependencies

npm install hyperstack-react

Set up the provider

Wrap your app with HyperstackProvider to enable real-time streaming:

App.tsx

import { HyperstackProvider } from 'hyperstack-react';
import { Dashboard } from './Dashboard';

export default function App() {
  return (
    <HyperstackProvider autoConnect={true}>
      <Dashboard />
    </HyperstackProvider>
  );
}

Stream data with hooks

Use the useHyperstack hook to access views and stream real-time data:

Dashboard.tsx

import { useHyperstack } from 'hyperstack-react';
import { ORE_STREAM_STACK } from 'hyperstack-stacks/ore';

export function Dashboard() {
  const { views, isConnected } = useHyperstack(ORE_STREAM_STACK);
  const { data: latestRound } = views.OreRound.latest.useOne();
  const { data: treasury } = views.OreTreasury.list.useOne();

  return (
    <div>
      <h1>Ore Mining Dashboard</h1>
      <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
      
      {latestRound && (
        <div>
          <h2>Latest Round</h2>
          <p>Round #{latestRound.id.round_id}</p>
          <p>Motherlode: {latestRound.state?.motherlode}</p>
          <p>Total Deployed: {latestRound.state?.total_deployed}</p>
        </div>
      )}
      
      {treasury && (
        <div>
          <h2>Treasury</h2>
          <p>Balance: {treasury.state?.balance}</p>
          <p>Total Staked: {treasury.state?.total_staked}</p>
        </div>
      )}
    </div>
  );
}

Run your app

npm run dev

Your app will connect to the Hyperstack server and display real-time updates as new blocks are mined!

Key concepts

HyperstackProvider: Root provider that manages the WebSocket connection
useHyperstack(stack): Hook to access views for a specific stack
.useOne(): Subscribe to a single entity with automatic updates
isConnected: Track connection state

The React SDK automatically handles reconnection, state synchronization, and cleanup when components unmount.

TypeScript quickstart

Build a Node.js application that streams Ore mining data using the framework-agnostic TypeScript SDK.

Install dependencies

npm install hyperstack-typescript

Connect and stream

Create a file to stream real-time updates:

main.ts

import { HyperStack } from 'hyperstack-typescript';
import { ORE_STREAM_STACK } from 'hyperstack-stacks/ore';

async function main() {
  const hs = await HyperStack.connect(ORE_STREAM_STACK);

  console.log('Connected! Streaming updates...');

  // Stream latest round updates
  for await (const round of hs.views.OreRound.latest.watch({ take: 1 })) {
    console.log('\n=== Latest Round ===');
    console.log('Round #:', round.id.round_id);
    console.log('Motherlode:', round.state?.motherlode);
    console.log('Total Deployed:', round.state?.total_deployed);
    console.log('Expires At:', round.state?.expires_at);
  }
}

main().catch(console.error);

Run your script

npx tsx main.ts

You’ll see real-time updates as the Ore mining state changes!

Streaming patterns

The TypeScript SDK provides AsyncIterable-based streaming:

// Watch all updates to a list view
for await (const update of hs.views.myEntity.list.watch()) {
  if (update.type === 'upsert') {
    console.log('Entity updated:', update.key, update.data);
  } else if (update.type === 'delete') {
    console.log('Entity deleted:', update.key);
  }
}

// Watch a specific entity by key
for await (const update of hs.views.myEntity.state.watch('key-123')) {
  console.log('Entity changed:', update.data);
}

// Get rich updates with before/after diffs
for await (const update of hs.views.myEntity.list.watchRich()) {
  if (update.type === 'updated') {
    console.log('Changed from:', update.before);
    console.log('Changed to:', update.after);
  }
}

One-shot queries

You can also fetch current state without streaming:

// Get all entities
const entities = await hs.views.myEntity.list.get();

// Get a specific entity
const entity = await hs.views.myEntity.state.get('key-123');

Rust quickstart

Build a Rust application that streams live Ore mining data.

Add dependencies

Add to your Cargo.toml:

Cargo.toml

[dependencies]
hyperstack-sdk = "0.5"
hyperstack-stacks = { git = "https://github.com/HyperTekOrg/hyperstack" }
tokio = { version = "1.0", features = ["full"] }
anyhow = "1.0"

Connect and stream

Create a streaming application:

main.rs

use hyperstack_sdk::prelude::*;
use hyperstack_stacks::ore::{OreRound, OreStreamStack, OreTreasury};

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    let hs = HyperStack::<OreStreamStack>::connect().await?;

    println!("Connected! Streaming updates...");

    // Get view accessors
    let round_view = hs.views.ore_round.latest();
    let treasury_view = hs.views.ore_treasury.list();

    // Stream latest round
    tokio::spawn(async move {
        let mut stream = round_view.listen();
        while let Some(round) = stream.next().await {
            println!("\n=== Round #{} ===", round.id.round_id.unwrap_or(0));
            println!("Motherlode: {:?}", round.state.motherlode);
            println!("Total Deployed: {:?}", round.state.total_deployed);
        }
    });

    // Stream treasury updates
    let mut treasury_stream = treasury_view.listen();
    while let Some(treasury) = treasury_stream.next().await {
        println!("\n=== Treasury ===");
        println!("Balance: {:?}", treasury.state.balance);
        println!("Total Staked: {:?}", treasury.state.total_staked);
    }

    Ok(())
}

Run your application

cargo run

Your application will connect and stream real-time updates!

Streaming with filters

The Rust SDK supports chainable stream operators:

use std::collections::HashSet;

let watchlist: HashSet<String> = /* entities to watch */;

let mut filtered = hs
    .watch::<MyEntity>()
    .filter(move |u| watchlist.contains(u.key()))
    .filter_map(|update| match update {
        Update::Upsert { key, data } => Some(data),
        _ => None,
    });

while let Some(data) = filtered.next().await {
    println!("Filtered update: {:?}", data);
}

Rich updates

Track before/after changes:

let mut stream = hs.watch_rich::<MyEntity>();
while let Some(update) = stream.next().await {
    match update {
        RichUpdate::Created { key, data } => {
            println!("Created: {}", key);
        }
        RichUpdate::Updated { before, after, .. } => {
            println!("Changed from: {:?}", before);
            println!("Changed to: {:?}", after);
        }
        RichUpdate::Deleted { key, last_known } => {
            println!("Deleted: {}", key);
        }
    }
}

What’s next?

Core concepts

Learn about stacks, views, and projections

Stack API

Explore the complete client API reference

Deploy your stack

Learn how to deploy your own stack

View examples

Browse complete example applications

Getting Started

Core Concepts

Building Stacks

Using Stacks

Quickstart

Quickstart

Choose your path

React quickstart

Key concepts

TypeScript quickstart

Streaming patterns

One-shot queries

Rust quickstart

Streaming with filters

Rich updates

What’s next?

Core concepts

Stack API

Deploy your stack

View examples

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Building Stacks

Using Stacks

Documentation Index

​Quickstart

​Choose your path

​React quickstart

​Key concepts

​TypeScript quickstart

​Streaming patterns

​One-shot queries

​Rust quickstart

​Streaming with filters

​Rich updates

​What’s next?

Core concepts

Stack API

Deploy your stack

View examples

Build docs developers (and LLMs) love

Quickstart

Choose your path

React quickstart

Key concepts

TypeScript quickstart

Streaming patterns

One-shot queries

Rust quickstart

Streaming with filters

Rich updates

What’s next?