Guide
Guide
Comprehensive guide to building applications with Hypen
Guide
This guide covers everything you need to know to build applications with Hypen.
Core Concepts
-
Basics - Fundamental syntax: components, arguments, applicators, state bindings, and actions
-
Components - Complete reference of all built-in components
-
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
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
Start with Basics to learn the fundamental concepts, or jump to a specific topic above.