Playground

Try ToonUI

Explore the UI language an AI model can return to render forms, actions, confirmations, and structured chat interfaces.

Quick examples

Load a sample instantly without scrolling.

Authoring rules

ToonUI

Edit the UI language the model could return.

Rendered UI

This is how your product can render the model output.

Product deleted

Candy was deleted successfully.

Recommended actions

Choose what you want to do next.

AI authoring rules

The playground now teaches the contract, not just a few examples.

ToonUI output must stay inside normal markdown plus valid toon-ui blocks, using only the official catalog and canonical syntax.

Hard rules

Output only normal markdown plus optional toon-ui fenced blocks.
Use only official ToonUI components from the catalog.
Use structural child nodes only inside their valid parents.
Do not invent components, props, or raw HTML/JS/CSS.
Keep actions explicit with reply="..." or submit.
If unsure, simplify to a smaller valid UI instead of improvising.

Official root components

textheadingseparatorcardformfieldbuttonconfirmlistitembadgealerttableemptytabsaccordiondialogsheetpopovertooltipprogressloadingtoastbreadcrumbpaginationmenucommandchart

Structural child nodes

crumbactiontabsectionseriespoint

Featured canonical examples

These are sample ToonUI blocks from the official language.

This section is intentionally a curated sample set. The full language is the official catalog above, not only the examples shown here.

alert

Show status, feedback, or important information.

ToonUI code

alert success "Product deleted":
  text "Candy was deleted successfully."

Rendered UI

Product deleted

Candy was deleted successfully.

text

Render supporting copy inside any block.

ToonUI code

text "This is a simple supporting message for the user."

Rendered UI

This is a simple supporting message for the user.

card

Group related content and next actions.

ToonUI code

card "Recommended actions":
  text "Choose what you want to do next."

Rendered UI

Recommended actions

Choose what you want to do next.

button

Trigger reply or submit actions from the UI.

ToonUI code

button primary "Create product" reply="start-create-product"

Rendered UI

form

Collect structured data without leaving chat.

ToonUI code

form "Create product":
  field name text "Name" placeholder="Premium chocolate" required
  button primary "Save" submit

Rendered UI

field

Add typed inputs inside a form.

ToonUI code

form "Price update":
  field price number "Price" placeholder="12.99" required
  button primary "Update" submit

Rendered UI

confirm

Ask for explicit confirmation before sensitive actions.

ToonUI code

confirm danger "Delete product?":
  text "Candy will be removed from inventory."
  button secondary "Cancel" reply="cancel-delete"
  button danger "Yes, delete it" reply="confirm-delete"

Rendered UI

Delete product?

Candy will be removed from inventory.

list

Render structured collections inside chat.

ToonUI code

list "Available products":
  item "Candy":
    text "Price: $4.50 · Stock: 18 units"

Rendered UI

Available products

Candy

Price: $4.50 · Stock: 18 units

item

Represent entries inside a list.

ToonUI code

list "Product":
  item "Candy":
    text "Ready to publish"

Rendered UI

Product

Candy

Ready to publish

badge

Show compact status labels.

ToonUI code

card "Status":
  badge "Active" success

Rendered UI

Status

Active

table

Show structured rows and columns for tabular data.

ToonUI code

table "Sales":
  columns: "Date", "Sale number", "Total", "Status"
  row: "May 14", "S-001", "$25.00", "Paid"
  row: "May 15", "S-002", "$48.00", "Pending"

Rendered UI

Sales

Date	Sale number	Total	Status
May 14	S-001	$25.00	Paid
May 15	S-002	$48.00	Pending

Present a semantic list of next-step actions.

ToonUI code

menu "Quick actions":
  action "Create sale" reply="start-sale"
  action "View inventory" reply="show-inventory"
  action "Open reports" reply="open-reports"

Rendered UI

Quick actions

View complete syntax reference