Basics Reference

This is a complete reference for the fundamental syntax elements of the Hypen language.

Syntax Overview

// Component with arguments
Text("Hello World")

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

// Component with applicators
Text("Styled")
    .fontSize(18)
    .color("#333")

// Module (stateful component)
module Counter {
    Text("Count: ${state.count}")
}

Components

Components are declared with a PascalCase name, optional arguments in parentheses, and optional children in braces.

ComponentName(arg1, arg2: value) {
    ChildComponent()
}

Arguments

Positional Arguments

Text("Hello")
Image("photo.jpg")

Named Arguments

Input(placeholder: "Enter text")
    .value(${state.text})

Argument Types

Type	Example
String	`"hello"`
Number	`42`, `3.14`
Boolean	`true`, `false`
List	`["a", "b", "c"]`
Map	`{ key: "value" }`
State binding	`${state.value}`
Action	`@actions.name`

State Bindings

State bindings use ${state.path} syntax:

Text("Hello, ${state.user.name}")
Text("Count: ${state.count}")

Actions

Actions use @actions.actionName syntax via event applicators:

Button { Text("Submit") }
    .onClick(@actions.submit)

Input(placeholder: "Enter text")
    .onInput(@actions.updateText)

Applicators

Applicators are chained with dot notation:

Text("Hello")
    .fontSize(18)
    .fontWeight("bold")
    .color("#3B82F6")
    .padding(16)

Comments

// Single line comment

/* Multi-line
   comment */

Modules

Modules are stateful components:

module ModuleName {
    // UI goes here
}

The module name must match a TypeScript file that defines its state and actions.

Basics Reference

On this page