Hypen
Server SDKs

Server SDKs Overview

Server-side rendering and streaming for Hypen applications

Server SDKs

Hypen supports server-side rendering where the WASM engine runs on your server and streams UI patches to clients.

Architecture

┌─────────────────────────────────────────────────────┐
│  Your Server (Bun/Node.js/Go)                       │
│  • Runs Hypen WASM engine                           │
│  • Manages state and business logic                 │
│  • Streams UI patches over WebSocket                │
└─────────────────────────────────────────────────────┘
                      │ WebSocket
        ┌─────────────┼─────────────┐
        ↓             ↓             ↓
   ┌─────────┐   ┌─────────┐   ┌─────────┐
   │   Web   │   │ Android │   │   iOS   │
   │ Browser │   │   App   │   │   App   │
   └─────────┘   └─────────┘   └─────────┘

Benefits

  • One codebase - Write once, render anywhere
  • Thin clients - Clients just render patches
  • Server-side state - Easy to persist and secure
  • Hot updates - Change UI without app updates

Available SDKs

Quick Start

import { serve, app } from "@hypen-space/core";

const module = app
  .defineState({ count: 0 })
  .onAction("increment", async ({ state }) => {
    state.count++;
  });

const ui = `
  Column {
    Text("Count: \${state.count}")
    Button { Text("+1") }
      .onClick(@actions.increment)
  }
`;

serve({ module, ui, port: 3000 });

See the Remote App Tutorial for a complete walkthrough.