AUP Interactive Demos — AUP Showcase

交互式 AUP 演示

52 个在 AUP 渲染器中运行的在线演示——从仪表盘和表单到物联网控制和品牌复刻。每个演示都是一个 JSON 文件。同一棵树在 iOS (SwiftUI)、Android (Compose)、终端和 Web 上呈现完全一致。

50在线演示

9分类

18跨平台原语

3目标平台 (Web, iOS, Android)

▶

实时预览

每个演示都在真实的 AUP 渲染器中运行。所见即所得——同样的 JSON 树在 iOS (SwiftUI)、Android (Compose) 或终端上渲染效果完全一致。

🔍

交互式探索

点击任意演示标签切换预览。使用「查看源码」开关查看生成各界面的 AUP JSON。每个演示都是单个 JSON 文件。

⚙

跨设备就绪

全部 52 个演示仅使用 AUP 的 18 个跨平台原语（加上少量仅 Web 的专用组件）。降级链确保每个 UI 都能适配设备能力。

■ 仪表盘与门户6 个演示

Multi-panel layouts combining charts, tables, metric cards, and live data feeds. AUP's view primitive with layout: row and mode: card/panel composes complex dashboard grids without any custom CSS.

关键特性

Zero CSS grids — view with layout: row and gap handles all column/row arrangements
Live data binding — each card's src property connects to a data endpoint; changes push automatically
Nested composition — cards contain charts, charts sit beside tables, all from the same JSON tree

dashboard

finance

portal

👁

值得关注

Notice how dashboard arranges 6+ metric cards and charts in a responsive grid using only view nesting. In finance, the candlestick chart and order book update from the same data source. portal shows a full app shell with sidebar navigation, header, and content area — all declarative.

全部演示：dashboard finance portal workspace report subsystems

{
  "type": "view",
  "props": { "layout": "row", "animate": "slide-up" },
  "children": [
    { "type": "view", "props": { "mode": "card" }, "children": [
      { "type": "text", "props": { "content": "Total Requests" } },
      { "type": "text", "props": { "content": "1.2M", "scale": "display" } }
    ]},
    { "type": "chart", "props": { "variant": "line", "title": "Traffic Trend" }, "src": "data/traffic" }
  ]
}

✎ 表单与向导2 个演示

Input validation, multi-step flows, and settings panels built from AUP's input and action primitives. Sidebar step navigation, field validation, and conditional visibility — all declared in JSON.

关键特性

Multi-step wizards — sidebar navigation with step indicators, each step a separate view child
Input variants — text, email, password, select, textarea, checkbox — all via input primitive's variant prop
Validation rules — required, pattern matching, and conditional visibility declared in the JSON tree

form-wizard

form-contact

👁

值得关注

In form-wizard, notice the sidebar step list and how advancing steps swaps the visible content panel. form-contact demonstrates field grouping, labels, and a submit action button — the form state is managed entirely through AUP events, no JavaScript handlers.

全部演示：form-contact form-wizard

{
  "type": "view",
  "props": { "layout": { "direction": "row", "gap": "lg" } },
  "children": [
    { "type": "view", "props": { "mode": "card", "size": { "width": "280px" } }, "children": [
      { "type": "text", "props": { "content": "Step 1: Account", "level": 3 } },
      { "type": "text", "props": { "content": "Step 2: Profile" } }
    ]},
    { "type": "input", "props": { "variant": "email", "label": "Email", "required": true } }
  ]
}

⌂ 智能家居5 个演示

Five IoT control interfaces with device panels, status readouts, and real-time charts. Each demo uses view cards with media icons, text status, and action buttons for device control.

关键特性

Device cards — each IoT device rendered as a view mode=card with icon, name, status, and toggle
Real-time charts — energy consumption and climate data via chart primitive bound to live sensor data
Room-based layout — sh-living groups devices by room using nested view containers

sh-homekit

sh-energy

sh-climate

👁

值得关注

sh-homekit recreates the Apple Home app layout — device tiles with status icons and toggle controls. sh-energy shows solar panels, battery, and grid consumption with area charts. sh-security combines camera feeds (media) with alarm status and motion sensor history.

全部演示：sh-climate sh-energy sh-homekit sh-living sh-security

{
  "type": "view",
  "props": { "layout": { "direction": "row", "gap": "md" } },
  "children": [
    { "type": "view", "props": { "mode": "card" }, "children": [
      { "type": "text", "props": { "content": "Solar Output" } },
      { "type": "text", "props": { "content": "4.2 kW", "scale": "display" } }
    ]},
    { "type": "chart", "props": { "variant": "area", "title": "24h Consumption" }, "src": "data/energy" }
  ]
}

◆ 数据可视化7 个演示

Charts (line, bar, area, pie, radar, scatter), geographic maps, 3D globe, and specialized visualizations. Each configured via props.variant and bound to live data via src.

关键特性

6 chart variants — line, bar, area, pie, radar, scatter — all from the single chart primitive
3D globe — WebGL-rendered rotating globe with data point overlays, degrades to map on low-cap devices
Specialized renderers — moonphase and natal show how custom web-only widgets extend the primitive set

chart

globe

map

👁

值得关注

chart displays all six chart variants side by side in a single page — same primitive, different variant prop. globe renders a 3D earth with clickable data points. calendar shows the calendar cross-platform primitive with event markers and month navigation.

全部演示：chart globe map calendar time moonphase natal

{
  "type": "view",
  "props": { "layout": { "direction": "row", "gap": "md" } },
  "children": [
    { "type": "chart", "props": { "variant": "line", "title": "Revenue Trend" }, "src": "data/revenue" },
    { "type": "chart", "props": { "variant": "pie", "title": "Market Share" }, "src": "data/market" },
    { "type": "chart", "props": { "variant": "bar", "title": "Monthly Sales" }, "src": "data/sales" }
  ]
}

✉ 通信4 个演示

Real-time messaging with channel lists, message feeds, and input composers. Cross-node event routing: selecting a channel fires an event that updates the message list's src binding.

关键特性

Event-driven navigation — selecting a channel fires an event that rebinds the message list's src
Chat primitive — the cross-platform chat type handles message list, input composer, and typing indicators
Session management — session and session-chrome show browser-like tab management within AUP

chat

session

sharing

👁

值得关注

chat shows a full messaging app: channel sidebar (via afs-list), message feed, and input bar. Click a channel — the message list updates via AUP event routing, no page reload. sharing demonstrates share sheets and social media previews as AUP overlay nodes.

全部演示：chat session session-chrome sharing

{
  "type": "afs-list",
  "src": "data/channels",
  "props": {
    "layout": "list", "itemStyle": "compact",
    "fields": { "icon": "content.icon", "title": "content.name", "badge": "content.unread" }
  },
  "events": {
    "select": { "target": "messages", "set": { "src": "$args.content.messagesPath" } }
  }
}

☰ 列表与集合10 个演示

The afs-list primitive's two dimensions: layout (list, grid, masonry, slideshow, table) × itemStyle (row, card, compact, media, hero). Pagination, virtual scrolling, and custom templates — all JSON.

关键特性

Layout × ItemStyle matrix — 5 layouts × 5 item styles = 25 combinations from one primitive
Field mapping — fields prop maps data keys to display slots (title, subtitle, image, badge)
Virtual scrolling — list-virtual renders 10,000+ items with DOM recycling, no pagination needed

list-grid

list-fields-hero

list-virtual

👁

值得关注

Compare list-fields-row vs list-fields-card vs list-fields-hero — same data, different itemStyle. list-grid shows a product catalog with image cards. list-pagination demonstrates server-side paging with page controls — the list fetches only the current page via src.

全部演示：list-basic list-pagination list-template list-grid list-virtual list-fields-row list-fields-card list-fields-compact list-fields-media list-fields-hero

{
  "type": "afs-list",
  "src": "data/products",
  "props": {
    "layout": "grid", "itemStyle": "card",
    "fields": { "image": "content.thumbnail", "title": "content.name", "subtitle": "content.price" },
    "pageSize": 12
  }
}

✎ 内容与媒体8 个演示

Article layouts, media galleries, and branded showcase pages. The same AUP primitives — view, text, media, action — compose into polished product interfaces through layout and theme configuration alone.

关键特性

Rich typography — text primitive with level, scale, and intent for headings, body, captions, and badges
Media galleries — unsplash and exposure show photo grids with lightbox overlays using media + overlay
Markdown rendering — the markdown demo converts MD content to styled AUP text nodes

content

unsplash

overlays

👁

值得关注

content shows a full article page: hero image, author byline, body text, and related articles sidebar. unsplash recreates a photo search/gallery interface with masonry grid. overlays demonstrates modals, toasts, and slide-out panels — all via the overlay primitive.

全部演示：content markdown overlays supplementary universal exposure unsplash myvibe

{
  "type": "view",
  "children": [
    { "type": "text", "props": { "content": "Article Title", "level": 1 } },
    { "type": "view", "props": { "layout": { "direction": "row", "gap": "sm" } }, "children": [
      { "type": "text", "props": { "content": "Mar 15", "intent": "info" } },
      { "type": "text", "props": { "content": "5 min read", "intent": "muted" } }
    ]},
    { "type": "media", "props": { "type": "image", "src": "hero.jpg" } }
  ]
}

✪ 品牌体验4 个演示

Pixel-accurate recreations of well-known product interfaces — no custom CSS or HTML. Proves AUP's semantic nodes + theme tokens can reproduce complex, branded UIs from pure JSON.

关键特性

No custom CSS — every pixel is achieved through AUP theme tokens and primitive props
Complex layouts — google recreates the search page with header, search bar, suggestion pills, and footer
Dark/light themes — openai-home and once show dark-mode branded experiences

google

openai-home

once

👁

值得关注

google reproduces the Google homepage — centered search bar, 'I'm Feeling Lucky' button, and footer links. openai-home recreates the ChatGPT interface with sidebar, model selector, and message area. once shows a Basecamp-style project management UI. All pure JSON, zero HTML.

全部演示：google openai-home openai-help once

⚙ 设备与降级4 个演示

How AUP handles device capabilities, error states, and graceful degradation. One tree definition adapts automatically: chart→table→text, map→media→text.

关键特性

Degradation chains — chart→table→text, map→media→text, editor→input→text — built into the protocol
Device caps detection — the runtime probes what the device supports and auto-selects the best renderer
Error boundaries — errors shows how invalid nodes display structured error messages instead of crashing

degradation-demo

device

errors

👁

值得关注

degradation-demo shows the same tree rendered with full, reduced, and minimal capabilities side by side. Watch charts become tables and maps become images. device displays current device capabilities and how each primitive resolves on this device.

全部演示：device errors degradation-demo wm-desktop

// Full caps → chart + map + editor
// Reduced  → auto-degrades:
//   chart → table → text
//   map   → media → text
{
  "children": [
    { "type": "chart", "props": { "variant": "bar" }, "src": "data/revenue" },
    { "type": "map", "props": { "center": [37.77, -122.42], "zoom": 10 } },
    { "type": "editor", "props": { "language": "markdown" } }
  ]
}

启动 AUP 演练场 →