Language Reference
Applicators Reference Complete reference for Hypen applicators
Complete reference for all applicators in Hypen.
Applicator Description Example padding Internal spacing .padding(16)padding(top, right, bottom, left) Per-side padding .padding(top: 16, left: 8)padding(horizontal, vertical) Axis padding .padding(horizontal: 16, vertical: 8)margin External spacing .margin(8)gap Child spacing .gap(12)rowGap Row gap in grid .rowGap(16)columnGap Column gap in grid .columnGap(8)
Applicator Description Example width Fixed width .width(200)height Fixed height .height(100)size Both dimensions .size(48)minWidth Minimum width .minWidth(100)maxWidth Maximum width .maxWidth(500)minHeight Minimum height .minHeight(50)maxHeight Maximum height .maxHeight(300)fillMaxWidth Fill width .fillMaxWidth(true)fillMaxHeight Fill height .fillMaxHeight(true)fillMaxSize Fill both .fillMaxSize(true)aspectRatio Aspect ratio .aspectRatio(16/9)
Applicator Description Example color Text color .color("#333")backgroundColor Background .backgroundColor("#fff")opacity Transparency .opacity(0.5)
Applicator Description Example fontSize Text size .fontSize(16)fontWeight Weight/boldness .fontWeight("bold")fontFamily Font family .fontFamily("Inter")fontStyle Style (italic) .fontStyle("italic")textAlign Alignment .textAlign("center")lineHeight Line height .lineHeight(1.5)textDecoration Decoration .textDecoration("underline")
Applicator Description Example borderRadius Corner radius .borderRadius(8)borderWidth Border thickness .borderWidth(1)borderColor Border color .borderColor("#ccc")
Applicator Description Example shadow Shadow effect .shadow(blur: 8)elevation Android elevation .elevation(4)
Applicator Description Example horizontalAlignment Horizontal align .horizontalAlignment("center")verticalAlignment Vertical align .verticalAlignment("center")weight Flex weight .weight(1)flex Flex shorthand .flex(1)flexGrow Grow factor .flexGrow(1)flexShrink Shrink factor .flexShrink(0)
Applicator Description Example gridColumns Number of columns .gridColumns(3)gridTemplateColumns Column template .gridTemplateColumns("1fr 2fr 1fr")
Applicator Description Example bind Two-way state binding .bind(@state.name)
The .bind() applicator provides two-way data binding for form elements. It maps to the correct property per element type:
Input / Textarea : Binds value (String)Checkbox : Binds checked (Boolean)Switch : Binds on (Boolean)Select : Binds value (String)Video / Scrubber : Binds a playback struct ({ playing, position, duration, state }) — see the Video component
Input (placeholder : "Name" ). bind (@state.name) Checkbox {}. bind (@state.agreed) Switch {}. bind (@state.darkMode) Select {}. bind (@state.country) Video (src : " @{state.url} " ). bind (@state.playback) Applicator Description Example videoIntent Renderer-local video control (no module round trip). "fullscreen" toggles fullscreen on the enclosing Video's container from inside the user gesture. Inert outside a Video; composes with .onClick. .videoIntent("fullscreen")
