Introduction

What is Hypen?

Hypen is a declarative UI language for building cross-platform applications. Write your UI once and deploy to Web, Android, and iOS with native performance.

Column {
    Text("Hello, Hypen!")
        .fontSize(24)
        .fontWeight("bold")

    Button { Text("Click me") }
        .onClick(@actions.sayHello)
        .backgroundColor("#3B82F6")
        .padding(16)
        .borderRadius(8)
}

Unlike traditional cross-platform frameworks that use WebViews or custom rendering engines, Hypen compiles to native UI components on each platform:

• Web: Native DOM elements
• Android: Jetpack Compose
• iOS: SwiftUI (coming soon)

Why Hypen?

Write Once, Run Everywhere

Define your UI in a single .hypen file and it renders natively on every platform. No more maintaining separate codebases for web and mobile.

Simple, Intuitive Syntax

Hypen's syntax is designed to be readable and easy to learn. If you've used SwiftUI, Jetpack Compose, or Flutter, you'll feel right at home.

// Layout with Column and Row
Column {
    Row {
        Image("avatar.png").size(48)
        Text("John Doe").fontWeight("bold")
    }
    .gap(12)

    Text("Welcome back!")
        .color("#666666")
}
.padding(16)

Reactive by Default

State changes automatically update the UI. No manual DOM manipulation, no setState calls.

module Counter {
    Text("Count: ${state.count}")

    Button { Text("+1") }
        .onClick(@actions.increment)
}

// counter.ts
export default app
  .defineState({ count: 0 })
  .onAction("increment", async (action, state, next) => {
    state.count++;
    next();
  });

Native Performance

Hypen renders to platform-native components, not WebViews. Your app looks and feels native because it is native.

Type-Safe State Management

Modules provide TypeScript-powered state management with full type inference. Catch errors at compile time, not runtime.

How It Works

Hypen separates UI and logic:

1. Templates (.hypen files) - Define the visual structure
2. Modules (TypeScript) - Handle state and business logic

┌─────────────────┐     ┌─────────────────┐
│  Template.hypen │────▶│  Hypen Engine   │
└─────────────────┘     │    (WASM)       │
                        │                 │
┌─────────────────┐     │    Parses &     │
│   Module.ts     │────▶│   Reconciles    │
└─────────────────┘     └────────┬────────┘
                                 │
                                 ▼
              ┌──────────────────┬──────────────────┐
              │                  │                  │
              ▼                  ▼                  ▼
        ┌──────────┐      ┌──────────┐      ┌──────────┐
        │   Web    │      │ Android  │      │   iOS    │
        │   DOM    │      │ Compose  │      │ SwiftUI  │
        └──────────┘      └──────────┘      └──────────┘

The Hypen engine (written in Rust, compiled to WASM) parses your templates, manages state, and generates minimal patches that platform-specific renderers apply to the native UI.

When to Use Hypen

Hypen is great for:

• Cross-platform apps - One codebase for web and mobile
• Design systems - Consistent UI across platforms
• Rapid prototyping - Quick iteration with hot reload
• Server-driven UI - Dynamic interfaces from backend

Hypen might not be the best fit for:

• Platform-specific apps that need deep OS integration
• Games or graphics-intensive applications
• Apps that need to be as small as possible (WASM adds ~200KB)

Next Steps

Ready to get started?

1. Installation - Set up Hypen for your platform
2. Your First App - Build a simple counter app
3. Guide - Learn the language in depth