Write ToonUI
Syntax
Grammar examples for the most important ToonUI blocks.
General rules
- ToonUI is written inside fenced
```toon-uiblocks - Nested blocks use indentation
- Most containers end with
: - Actions are explicit:
reply="..."orsubmit - Some parents require structural child nodes like
crumb,action,tab,section,series, andpoint - The syntax is compact on purpose so models can emit it reliably
- Output must stay inside normal markdown plus optional
toon-uifenced blocks only - The model must not emit React, HTML, CSS, JavaScript, or component JSON
- The model must use official components only and must not invent props
Form example
form "Create product":
field name text "Name" required
field price number "Price" required
button primary "Create product" submitList example
list "Products":
item "Toon Mug":
text "Ceramic mug"
badge "In stock" success
button secondary "Open" reply="open:toon-mug"Card example
card "Customer found":
text "Jefferson Lopez Mendoza"
badge "Active" success
button secondary "View history" reply="view-customer-history"Confirm example
confirm danger "Delete customer?":
text "This action cannot be undone."
button secondary "Cancel" reply="cancel"
button danger "Yes, delete" reply="delete-customer"Table example
table "Sales":
columns: "Date", "Sale number", "Total", "Status"
row: "May 14", "S-001", "$25.00", "Paid"
row: "May 15", "S-002", "$48.00", "Pending"Navigation examples
breadcrumb:
crumb "Customers" reply="go:customers"
crumb "Jefferson Lopez"menu "Quick actions":
action "Create customer" reply="create-customer"
action "Start sale" reply="start-sale"Analytics example
chart bar "Weekly sales":
series "Store A":
point "Mon" 24
point "Tue" 31Field examples
field email email "Email" placeholder="name@company.com" required
field category select "Category" options="Beverages|Snacks|Home"
field tags multiselect "Tags" options="Popular|Fragile|Imported"
field active switch "Active" value="true"
field score slider "Score" min=0 max=10 step=1 value="7"Syntax design principles
The grammar is optimized for:
- readability by humans
- predictable generation by models
- reliable parsing
- explicit interaction intent
Common mistakes
- forgetting the trailing
:on container nodes - creating a
formwithout a submit button - using
select,radio, ormultiselectwithoutoptions - using
actionwithoutreply="..."orsubmit - putting raw HTML in
text - treating ToonUI like arbitrary markdown instead of a constrained language