Hypen Documentation

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

Why Hypen?

• One Codebase, All Platforms: Define your UI once and render natively on Web, Android, and iOS
• Native Performance: Renders to platform-native components, not WebViews
• Simple Syntax: Intuitive, declarative syntax that's easy to learn
• Reactive by Design: Automatic UI updates when state changes
• Type-Safe Modules: TypeScript-powered state management and actions

Quick Example

module HelloWorld {
    Column {
        Text("Hello, ${state.name}!")
            .fontSize(24)
            .fontWeight("bold")

        Input(placeholder: "Enter your name")
            .value(${state.name})
            .onInput(@actions.updateName)
            .padding(12)
            .borderRadius(8)
    }
    .padding(24)
    .gap(16)
}

// HelloWorld.ts
import { app } from "@hypen-space/core";

export default app
  .defineState({ name: "World" })
  .onAction("updateName", async (action, state, next) => {
    state.name = action.payload.value;
    next();
  });

Getting Started

New to Hypen? Start here:

1. Introduction - What is Hypen and why use it
2. Installation - Set up your development environment
3. Your First App - Build a counter app step-by-step

Guide

Learn Hypen in depth:

• Basics - Fundamental syntax and concepts
• Components - All built-in components
• Layout - Arranging components with Column, Row, Grid
• Styling - Applicators for colors, spacing, borders, and effects
• Inputs - Forms, buttons, and user interaction
• State & Modules - State management and actions

Tooling

• CLI - Create and run Hypen projects
• Language Server (LSP) - IDE support for VS Code, Cursor, and more

Platforms

Hypen renders natively on multiple platforms:

• Web - Browser DOM rendering
• Android - Jetpack Compose rendering
• iOS - SwiftUI rendering

Next Steps

Ready to dive in? Install the CLI and build your first app!