Playground

Render components in real time from A2UI JSON. Edit the component tree on the left, and the right panel will immediately display the current rendered result of any successfully parsed input.

Examples

选择模板

先选一个场景，再在右侧查看渲染效果并继续调整 JSON。

JSON Editor

直接编辑根组件 JSON，保持和官方 playground 一样的核心工作流。

餐厅推荐列表743 lines已同步 06:54:32

餐厅推荐

改成更完整的推荐工作台：既有推荐结果，也有预订偏好、行程信息和备选页签，右侧渲染层次更丰富。

{ "type": "Column", "id": "restaurant-root", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Text", "id": "restaurant-title", "properties": { "text": { "literal": "今晚适合 4 人商务聚餐的餐厅推荐" }, "usageHint": "h2" } }, { "type": "Text", "id": "restaurant-copy", "properties": { "text": { "literal": "已根据“浦东、预算 400 元内、适合商务沟通”的条件筛选，优先展示安静度、包间可用性和临时改签灵活性更高的候选。" }, "usageHint": "body" } }, { "type": "Divider", "id": "restaurant-header-divider", "properties": {} }, { "type": "Row", "id": "restaurant-filters", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-filter-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-1-label", "properties": { "text": { "literal": "区域" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-1-value", "properties": { "text": { "literal": "浦东陆家嘴" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-1-note", "properties": { "text": { "literal": "步行或短途打车可达" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-filter-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-2-label", "properties": { "text": { "literal": "预算" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-2-value", "properties": { "text": { "literal": "人均 ¥120 - ¥180" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-2-note", "properties": { "text": { "literal": "整体预算控制在 ¥400 内" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-filter-3", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-3-label", "properties": { "text": { "literal": "重点偏好" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-3-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-3-value", "properties": { "text": { "literal": "安静 / 可预订 / 适合沟通" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-3-note", "properties": { "text": { "literal": "优先考虑包间、停车和座位间距" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-filters-divider", "properties": {} }, { "type": "Row", "id": "restaurant-feature", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-featured-card", "weight": 1.35, "properties": { "children": [ { "type": "Text", "id": "restaurant-featured-title", "properties": { "text": { "literal": "首选：云和会馆" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-featured-meta", "properties": { "text": { "literal": "评分 4.7 · 步行 8 分钟 · 人均 ¥168" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-featured-reason", "properties": { "text": { "literal": "包间质量稳定，晚高峰噪音控制较好，服务节奏也更适合正式商务沟通；菜品风险低，适合第一次正式会面。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-featured-note", "properties": { "text": { "literal": "如果你更在意稳妥与安静，这家应排第一；如果临时需要投影设备，也更容易协调。" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-booking", "properties": { "children": [ { "type": "Text", "id": "restaurant-booking-title", "properties": { "text": { "literal": "预订偏好" }, "usageHint": "h4" } }, { "type": "MultipleChoice", "id": "restaurant-booking-purpose", "properties": { "options": [ { "label": { "literal": "正式商务沟通" }, "value": "business" }, { "label": { "literal": "轻松聚餐" }, "value": "casual" }, { "label": { "literal": "带演示材料沟通" }, "value": "presentation" } ], "selections": { "literal": "business" } } }, { "type": "DateTimeInput", "id": "restaurant-booking-time", "properties": { "value": { "literal": "2026-03-17T19:00" }, "enableDate": true, "enableTime": true } }, { "type": "CheckBox", "id": "restaurant-booking-room", "properties": { "label": { "literal": "优先预订包间" }, "value": { "literalBoolean": true } } }, { "type": "CheckBox", "id": "restaurant-booking-parking", "properties": { "label": { "literal": "需要提供停车位信息" }, "value": { "literalBoolean": true } } }, { "type": "Text", "id": "restaurant-booking-note", "properties": { "text": { "literal": "尽量在 17:30 前锁位，避免晚高峰排队。" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-divider", "properties": {} }, { "type": "Row", "id": "restaurant-plan-row", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-route-card", "weight": 1.15, "properties": { "children": [ { "type": "Text", "id": "restaurant-route-title", "properties": { "text": { "literal": "到店安排" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-route-body", "properties": { "text": { "literal": "18:40 从陆家嘴地铁站出发，步行约 8 分钟可达；如果带客户同行，建议 18:50 先到店确认包间。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-route-note", "properties": { "text": { "literal": "门口停车位较少，自驾建议提前联系餐厅登记车牌。" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-budget-card", "properties": { "children": [ { "type": "Text", "id": "restaurant-budget-title", "properties": { "text": { "literal": "预算匹配度" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-budget-copy", "properties": { "text": { "literal": "当前推荐与预算的匹配程度" }, "usageHint": "caption" } }, { "type": "Slider", "id": "restaurant-budget-slider", "properties": { "value": { "literalNumber": 82 }, "minValue": 0, "maxValue": 100 } }, { "type": "Text", "id": "restaurant-budget-note", "properties": { "text": { "literal": "在人均 168 元的情况下，四人用餐仍保留了加点空间。" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-plan-divider", "properties": {} }, { "type": "Tabs", "id": "restaurant-tabs", "properties": { "tabItems": [ { "id": "restaurant-tabs-tab-0", "title": { "literal": "备选名单" }, "child": { "type": "List", "id": "restaurant-shortlist", "properties": { "direction": "vertical", "children": [ { "type": "Card", "id": "restaurant-option-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-option-1-title", "properties": { "text": { "literal": "江南里" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-option-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-option-1-line-1", "properties": { "text": { "literal": "评分 4.6 · 人均 ¥145" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-1-line-2", "properties": { "text": { "literal": "本帮菜口味稳，出菜速度快" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-1-line-3", "properties": { "text": { "literal": "更适合重视性价比的商务晚餐" }, "usageHint": "body" } } ] } }, { "type": "Card", "id": "restaurant-option-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-option-2-title", "properties": { "text": { "literal": "初见 Bistro" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-option-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-option-2-line-1", "properties": { "text": { "literal": "评分 4.5 · 人均 ¥158" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-2-line-2", "properties": { "text": { "literal": "环境现代，适合带演示材料沟通" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-2-line-3", "properties": { "text": { "literal": "临时改成更轻松的会面也不会突兀" }, "usageHint": "body" } } ] } } ] } } }, { "id": "restaurant-tabs-tab-1", "title": { "literal": "推荐理由" }, "child": { "type": "List", "id": "restaurant-reasons", "properties": { "direction": "vertical", "children": [ { "type": "Card", "id": "restaurant-reason-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-reason-1-title", "properties": { "text": { "literal": "为什么首推云和会馆" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-reason-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-reason-1-line-1", "properties": { "text": { "literal": "安静度最稳定，包间体验明显优于同价位餐厅。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-reason-1-line-2", "properties": { "text": { "literal": "服务响应快，适合正式会面中的节奏控制。" }, "usageHint": "body" } } ] } }, { "type": "Card", "id": "restaurant-reason-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-reason-2-title", "properties": { "text": { "literal": "何时切换备选" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-reason-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-reason-2-line-1", "properties": { "text": { "literal": "如果晚间临时约人，可换到江南里降低等待风险。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-reason-2-line-2", "properties": { "text": { "literal": "如果希望氛围更轻松，可改成初见 Bistro。" }, "usageHint": "body" } } ] } } ] } } } ] } }, { "type": "Divider", "id": "restaurant-tabs-divider", "properties": {} }, { "type": "Card", "id": "restaurant-footer", "properties": { "children": [ { "type": "Text", "id": "restaurant-footer-title", "properties": { "text": { "literal": "推荐结论" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-footer-copy", "properties": { "text": { "literal": "优先预订云和会馆；如果更重视性价比，选择江南里会更合适；如果需要更现代的轻商务氛围，则选择初见 Bistro。" }, "usageHint": "body" } }, { "type": "Row", "id": "restaurant-footer-actions", "properties": { "alignment": "center", "distribution": "start", "children": [ { "type": "Button", "id": "restaurant-footer-button", "properties": { "child": { "type": "Text", "id": "restaurant-footer-button-label", "properties": { "text": { "literal": "复制推荐摘要" }, "usageHint": "body" } } } }, { "type": "Button", "id": "restaurant-footer-book-button", "properties": { "child": { "type": "Text", "id": "restaurant-footer-book-button-label", "properties": { "text": { "literal": "生成预订备注" }, "usageHint": "body" } } } } ] } } ] } } ] } }

Preview

编辑左侧 JSON 后，右侧会立即更新。

Column餐厅推荐

餐厅推荐列表

餐厅推荐

Live