AUP Interactive Demos — AUP Showcase

Interactive AUP Demos

52 live demos running in the AUP renderer — from dashboards and forms to IoT controls and branded recreations. Every demo is a single JSON file. The same tree renders identically on iOS (SwiftUI), Android (Compose), terminal, and web.

50Live Demos

9Categories

18Cross-Platform Primitives

3Targets (Web, iOS, Android)

▶

Live Previews

Every demo runs in the actual AUP renderer. What you see below is real — the same JSON tree would render identically on iOS (SwiftUI), Android (Compose), or terminal.

🔍

Interactive Exploration

Click any demo pill to switch the preview. Use the 'View Source' toggle to see the AUP JSON that produces each interface. Every demo is a single JSON file.

⚙

Cross-Device Ready

All 52 demos use only AUP's 18 cross-platform primitives (plus web-only widgets for specialty cases). Degradation chains ensure every UI adapts to device capabilities.

■ Dashboards & Portals6 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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" }
  ]
}

✎ Forms & Wizards2 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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 } }
  ]
}

⌂ Smart Home5 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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" }
  ]
}

◆ Data Visualization7 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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" }
  ]
}

✉ Communication4 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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" } }
  }
}

☰ Lists & Collections10 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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
  }
}

✎ Content & Media8 demos

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.

Key Features

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

👁

What to look for

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.

All demos: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" } }
  ]
}

✪ Branded Experiences4 demos

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.

Key Features

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

👁

What to look for

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.

All demos:google openai-home openai-help once

⚙ Device & Degradation4 demos

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

Key Features

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

👁

What to look for

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.

All demos: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" } }
  ]
}

Launch AUP Playground →