yao/sui

SUI - Simple User Interface

SUI is a full-stack web development framework that allows you to create web applications using HTML, CSS, and TypeScript/JavaScript without complex build tools.

Features

• Page as Component: Every page is a component, unifying the development model
• Template Syntax: Intuitive data binding, conditionals, and loops
• Backend Scripts: Server-side logic with TypeScript
• Scoped Styles: Automatic CSS scoping per component
• i18n Support: Built-in internationalization
• Agent SUI: Special configuration for AI Agent applications

Quick Start

Directory Structure

/templates/<template_name>/
├── __document.html         # Global document template
├── __data.json             # Global data (accessible via $global)
├── __assets/               # Static assets (reference via @assets/)
├── __locales/              # Locale files
└── pages/                  # All pages go here
    └── <page>/             # Route = folder name (can be nested)
        ├── <page>.html     # HTML template (filename must match folder)
        ├── <page>.css      # Styles
        ├── <page>.ts       # Frontend script
        ├── <page>.json     # Data configuration
        ├── <page>.config   # Page configuration
        ├── <page>.backend.ts  # Backend script
        └── __locales/      # Page-level locale files

Basic Page

/home/home.html:

<div class="home">
  <h1>{{ title }}</h1>
  <p s:if="{{ showMessage }}">{{ message }}</p>
</div>

/home/home.json:

{
  "title": "Welcome",
  "showMessage": true,
  "message": "Hello, World!"
}

Commands

# Build templates
yao sui build <sui> [template]

# Watch for changes
yao sui watch <sui> [template]

# Build Agent SUI
yao sui build agent

# Watch Agent SUI
yao sui watch agent

Documentation

• Template Syntax - Data binding, conditionals, loops
• Components - Page as component, props, slots
• Backend Scripts - Server-side logic
• Data Binding - Built-in variables and functions
• Event Handling - Event binding and state management
• Internationalization - Translation and localization
• Frontend API - Component query, backend calls, render API, CUI integration
• Agent SUI - AI Agent application setup

Agent SUI

Agent SUI is designed for AI Agent applications with automatic page loading from assistants:

<app>/
├── agent/
│   └── template/              # Agent SUI template (shared)
│       ├── __document.html
│       ├── __data.json
│       ├── __assets/
│       └── pages/             # Global pages (401, 404, etc.)
│           └── <page>/
└── assistants/
    └── <name>/
        └── pages/             # Assistant pages → /agents/<name>/<route>
            └── <page>/

Build with: yao sui build agent

See Agent SUI Documentation for details.

License

This project is part of the Yao App Engine and follows the Yao Open Source License.