OpenUI Lang Syntax
Expression grammar and common component signatures.
OpenUI Lang is line-oriented:
identifier = ExpressionExample:
root = Stack([title, form])
title = TextContent("Sign up", "large-heavy")
form = Form("signup", actions, [nameField, emailField])
nameField = FormControl("Name", Input("name", "Your name", "text", {required: true}))
emailField = FormControl("Email", Input("email", "you@example.com", "email", {required: true, email: true}))
actions = Buttons([submitBtn, cancelBtn], "row")
submitBtn = Button("Submit", @ToAssistant("Sign me up"), "primary")
cancelBtn = Button("Cancel", @ToAssistant("Cancel sign up"), "secondary")Supported expression types
| Type | Syntax | Example |
|---|---|---|
| Component call | TypeName(arg1, arg2) | CardHeader("Title", "Subtitle") |
| String | "text" | "hello" |
| Number | 42, 3.14, -1 | 3.14 |
| Boolean | true / false | true |
| Null | null | null |
| Array | [a, b, c] | [col1, col2] |
| Object | {key: value} | {variant: "info"} |
| Reference | identifier | nameField |
Rules
rootis the entry point. Without it, the first statement that calls the root component is used.- For OpenUI library prompts, start with
root = Stack(...). - Arguments are positional, based on Zod key order.
- Optional args can be omitted from the end.
- Forward references are allowed.
Common default-library signatures
These are the signatures in openuiLibrary from @openuidev/react-ui.
| Component | Signature |
|---|---|
Stack | Stack(children, direction?, gap?, align?, justify?, wrap?) |
Card | Card(children, variant?, direction?, gap?, align?, justify?, wrap?) |
TextContent | TextContent(text, size?) |
Form | Form(name, buttons, fields?) |
FormControl | FormControl(label, input, hint?) |
Input | Input(name, placeholder?, type?, rules?, value?) |
Select | Select(name, items, placeholder?, rules?, value?, size?) |
Button | Button(label, action?, variant?, type?, size?) |
Buttons | Buttons(buttons, direction?) |
Tabs | Tabs(items) |
TabItem | TabItem(value, trigger, content) |
Table | Table(columns) |
Col | Col(label, data, type?) |
BarChart | BarChart(labels, series, variant?, xLabel?, yLabel?, height?) |
For full generated signatures, inspect:
openuiLibrary.prompt(openuiPromptOptions);