AUP Interactive Demos — AUP Showcase

インタラクティブ AUP デモ

AUP レンダラーで動作する 52 のライブデモ——ダッシュボードやフォームから IoT コントロールやブランド再現まで。すべてのデモは単一の 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 プレイグラウンドを起動 →