Guide

This guide covers everything you need to know to build applications with Hypen.

Start Here

Tutorial: Build a Chat App — Learn Hypen by building a real AI chat application from scratch. Covers components, layout, state, actions, control flow, and async operations step by step.

Reference

• Basics — Fundamental syntax: components, arguments, applicators, state bindings, and actions

• Components — Complete reference of all built-in components

• Control Flow — ForEach, When, and If: iteration, pattern matching, and conditionals with real-world examples

• Routing — Navigation, route parameters, guards, and nested routing

• Layout — Structuring your UI with Column, Row, Grid, and other layout components

• Styling — Comprehensive applicator reference for colors, spacing, borders, typography, and effects

• Inputs — Form elements, buttons, and handling user interactions

• State & Modules — Managing state and defining actions with TypeScript modules

• Data Source Plugins — Connect live subscription databases (SpacetimeDB, Firebase, Convex) to your UI

Quick Reference

Component Syntax

// Basic component
Text("Hello World")

// Component with children
Column {
    Text("First")
    Text("Second")
}

// Component with children and applicators
Button { Text("Save") }
    .onClick(@actions.save)

Applicator Syntax

Text("Styled")
    .fontSize(18)
    .fontWeight("bold")
    .color("#3B82F6")

State Bindings

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

Actions

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

Control Flow

// Iteration
ForEach(items: @state.items) {
    Text(@item.name)
}

// Pattern matching
When(value: @state.status) {
    Case(match: "loading") { Spinner() }
    Case(match: "error") { Text("Error") }
    Else { Text("Ready") }
}

// Boolean conditional
If(condition: @state.isVisible) {
    Text("Visible")
    Else { Text("Hidden") }
}

Next Steps

New to Hypen? Start with the Tutorial — it teaches every core concept by building a real app. Then explore the reference sections above for deeper coverage of each topic.