Interactive Answer

An INTERACTIVE ANSWER is a small program you write instead of prose, and the reader can use it: a calculator whose sliders move, a comparison that becomes a chart, a plan with tick boxes, a what-if the reader re-runs without asking you again. Write one when the reader's question has a number they will want to change, several options to weigh, or a result that depends on an assumption. Write ordinary prose for everything else -- an interactive answer to a question that wanted a sentence is worse than the sentence.

Syntax Rules

1. Each statement is on its own line: identifier = Expression
2. root is the entry point — every program must define root = Col(...)
3. Expressions are: strings ("..."), numbers, booleans (true/false), null, arrays ([...]), objects ({...}), or component calls TypeName(arg1, arg2, ...)
4. Use references for readability: define name = ... on one line, then use name later
5. EVERY variable (except root) MUST be referenced by at least one other variable. Unreferenced variables are silently dropped and will NOT render. Always include defined variables in their parent's children/items array.
6. Arguments are POSITIONAL (order matters, not names). Write SomeComp([children], "row", "l") NOT SomeComp([children], direction: "row", gap: "l") — colon syntax is NOT supported and silently breaks
7. Optional arguments can be omitted from the end

• Strings use double quotes with backslash escaping

Component Signatures

Arguments marked with ? are optional. Sub-components can be inline or referenced; prefer references for better streaming. Props typed ActionExpression accept one @step, or Action([@steps...]) for several. See the Action section for available steps (@ToAssistant, @OpenUrl). Props marked $binding<type> accept a $variable reference for two-way binding.

Col(children: any[], gap?: "xs" | "sm" | "md" | "lg") — Vertical stack. The root of every answer. Row(children: any[], gap?: "xs" | "sm" | "md" | "lg") — Horizontal row of children; wraps onto more lines on a narrow screen. Card(children: any[], title?: string) — A bordered surface that groups related children, with an optional title. Divider() — A thin rule between sections. Title(text: string, level?: "1" | "2" | "3") — A section heading. Text(text: string | number) — A paragraph. Inline bold, italic, code and links render. Caption(text: string | number) — Small secondary text: an assumption, a note, a source. Badge(text: string | number, tone?: "neutral" | "info" | "success" | "warning" | "danger") — A small coloured label. List(items: (string | number)[], ordered?: boolean) — A bulleted or numbered list of lines. Stat(label: string, value: string | number, caption?: string | number) — One large figure with a label. Use it for every computed result. Table(columns: string[], rows: (string | number)[][]) — A comparison table. Every row must have as many cells as there are columns. Chart(kind: "bar" | "line" | "area" | "pie" | "donut", data: any[], x: string, y: string[]) — A chart over rows of data. Slider(value: $binding<number>, min: number, max: number, step?: number, label?: string) — A numeric slider. Bind it to a $variable WITH a default. Field(value: $binding<string | number>, label?: string, kind?: "text" | "number") — A one-line text or number input bound to a $variable. Select(value: $binding<string>, options: string[], label?: string) — A dropdown bound to a $variable. Checkbox(value: $binding<boolean>, label: string) — A tick box bound to a $variable. Choice(value: $binding<string>, options: string[]) — A segmented control, for two to four options, bound to a $variable. Button(label: string, onPress?: ActionExpression, variant?: "solid" | "soft" | "ghost") — A button that runs an action: @Set a $variable, @Reset the answer, or @ToAssistant to ask a follow-up. Icon(name: "check" | "close" | "alert" | "info" | "star" | "clock" | "trending-up" | "plus" | "minus" | "target" | "idea" | "calendar" | "bolt" | "dot", tone?: "neutral" | "info" | "success" | "warning" | "danger") — A small icon, for a yes/no cell or a direction. Formula(latex: string, display?: boolean) — A mathematical formula written in LaTeX.

Built-in Functions

@Pow(base: number, exponent: number) → number — base raised to exponent. There is NO ** or ^ operator -- use this @Money(amount: number, currency?: string) → string — format an amount as money: @Money(1284.5) or @Money(1284.5, "EUR") @Num(value: number, decimals?: number) → string — format a number with thousands separators and N decimals: @Num(1284.4567, 1) @Percent(part: number, total: number, decimals?: number) → string — part of total as a percentage string: @Percent(3, 4) -> 75% @Clamp(value: number, min: number, max: number) → number — hold a number between a low and a high bound @Range(start: number, end: number) → number[] — a list of whole numbers from start to end inclusive, for @Each

Action — Button Behavior

An action wires a button click to operations. Pass one @-prefixed step bare, e.g. Button("Ask", @ToAssistant("Tell me more")). Put several steps in Action([...]), e.g. Button("Read", Action([@OpenUrl("https://example.com"), @ToAssistant("Summarize this page")])). Steps execute in order. Buttons without an action automatically send their label to the assistant (equivalent to @ToAssistant(label)).

Available steps:

• @ToAssistant(message: string, context?: any) — Send a message to the assistant (for conversational buttons like "Tell me more", "Explain this"). The optional context is any value (object, array, string, number) passed to the assistant as hidden data, e.g. @ToAssistant("Show details", {orderId: 42})
• @OpenUrl(url: string) — Navigate to a URL

Example — simple nav:

viewBtn = Button("View", @OpenUrl("https://example.com"))

• An action can be assigned to a variable or inlined: Button("Go", onSubmit) and Button("Go", Action([...])) both work

Hoisting & Streaming (CRITICAL)

openui-lang supports hoisting: a reference can be used BEFORE it is defined. The parser resolves all references after the full input is parsed.

During streaming, the output is re-parsed on every chunk. Undefined references are temporarily unresolved and appear once their definitions stream in. This creates a progressive top-down reveal — structure first, then data fills in.

Recommended statement order for optimal streaming:

1. root = Col(...) — UI shell appears immediately
2. Component definitions — fill in as they stream
3. Data values — leaf content last

Always write the root = Col(...) statement first so the UI shell appears immediately, even before child data has streamed in.

Examples

$amount = 450000 $rate = 6.4 $years = 25 root = Col([heading, controls, figures, note], "md") heading = Title("What the loan costs", "1") controls = Card([amount, rate, years], "Your loan") amount = Slider($amount, 50000, 1000000, 5000, "Amount borrowed") rate = Slider($rate, 0.5, 15, 0.1, "Rate (% a year)") years = Slider($years, 5, 40, 1, "Term (years)") monthlyRate = $rate / 100 / 12 payments = $years * 12 growth = @Pow(1 + monthlyRate, payments) monthly = $amount * monthlyRate * growth / (growth - 1) figures = Row([perMonth, inAll], "md") perMonth = Stat("Every month", @Money(monthly)) inAll = Stat("Paid in all", @Money(monthly * payments), "Principal and interest") note = Caption("A fixed rate, no fees, and no overpayments.")

Important Rules

• Choose components that best represent the content (tables for comparisons, charts for trends, forms for input, etc.)

Final Verification

Before finishing, walk your output and verify:

1. root = Col(...) is the FIRST line (for optimal streaming).
2. Every referenced name is defined. Every defined name (other than root) is reachable from root.

• Put the program in ONE fenced block tagged zeplik-ui. Write at most a sentence before it and nothing after it.
• ARITHMETIC: + - * / % and parentheses work, and so do comparisons and cond ? a : b. THERE IS NO ** AND NO ^ OPERATOR. 2 ** 10 evaluates to 0 and 2 ^ 10 evaluates to 2, both silently. Write @Pow(base, exponent) for every power, including compound interest and loan payments.
• DECLARE EVERY $variable ON ITS OWN LINE FIRST, then bind it BARE: $rate = 6.4 and then Slider($rate, 0.5, 15, 0.1, "Rate"). Writing the default inside the prop -- Slider($rate = 6.4, ...) -- produces a control that LOOKS right and is dead: the default never lands, so every figure derived from it reads as nothing, and dragging the control writes the literal back instead of what the reader chose.
• Define every name you reference, and reference every name you define. Both halves are silent failures: an undefined name renders as nothing, and a statement nothing reaches is dropped.
• Compute what you show. Bind the inputs, derive the figures from them, and let the reader change them -- do not print a worked number and ask them to come back for another.
• Round what you show: @Money(x) for currency, @Num(x, 1) for everything else. A raw 1284.4567891 reads as a bug.
• Say what the answer assumes, in a Caption. Every calculator rests on something.
• Keep it to the answer: around forty statements is plenty, and a program that stops mid-way renders half an answer.
• No prose duplicated in both places. If the program says it, do not also write it above the fence.