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
├── __assets/               # Static assets
├── __locales/              # Locale files
└── <route>/                # Pages
    └── <page>/
        ├── <page>.html     # HTML template
        ├── <page>.css      # Styles
        ├── <page>.ts       # Frontend script
        ├── <page>.json     # Data configuration
        ├── <page>.config   # Page configuration
        └── <page>.backend.ts  # Backend script

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
• 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
│       ├── __document.html
│       ├── __assets/
│       └── pages/
└── assistants/
    └── <name>/
        └── pages/             # Assistant pages

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.