🎨 A2UI Widget Gallery

Community repository of pre-built HTML/CSS/JS widgets optimized for OpenClaw's Live Canvas (A2UI).

Quick Start

npm install
npm run dev      # Dev server at http://localhost:5173
npm run build    # Production build → dist/

Widgets (10)

Widget	Category	Description
Pomodoro Timer	Productivity	Countdown with start/pause/reset, progress ring
Kanban Board	Productivity	Drag-and-drop task cards across columns
Stock/Crypto Ticker	Finance	Scrolling prices with mini charts, live updates
Markdown Renderer	Text	Split-pane editor with live preview
Data Table	Data	Sortable, filterable, paginated table
Progress Dashboard	Data	Circular progress rings for metrics
Calendar View	Productivity	Monthly calendar with event markers
Chat Bubble Timeline	Communication	Conversation history with input
File Tree Browser	Development	Expandable directory tree with metadata
System Stats Panel	Monitoring	CPU/memory/disk/network with sparklines

Using Widgets with A2UI

Each widget is a self-contained HTML file in public/widgets/. To use with OpenClaw:

// Load widget HTML and push to canvas
canvas(action: "a2ui_push", jsonl: '{"html":"<full widget HTML here>"}')

Click "System Prompt" on any widget card to get a copy-paste snippet for your SOUL.md.

Deployment

npm run build
# Deploy dist/ to any static host (Cloudflare Pages, Netlify, Vercel, etc.)
wrangler pages deploy dist --project-name=a2ui-gallery

Submit a Widget

Open an issue with:

• Widget HTML file (self-contained, no external deps)
• System prompt snippet
• Description and customization options

Tech Stack

• Gallery: Vite + React (dark theme)
• Widgets: Vanilla HTML/CSS/JS (zero dependencies)