Template Engine

SUI Template Engine, a new feature in Yao v0.10.4, is AI-friendly and streamlines web page creation and data integration. It supports backward compatibility, enabling developers to use HTML, CSS, and TypeScript/JavaScript while promoting code reusability with a component-based architecture.

**Note:** This document is a work in progress, some links may not work as expected.

**_Note: SUI is a new feature and still experimental. For advanced frontend requirements, consider using frameworks like React or Vue. Place the built files in the `public` directory and connect them to Yao via REST API._**

## Table of Contents

👉 [Template Engine Reference](reference/overview)

| Section                                            | Description                                                                                |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [Overview](reference/overview)                     | An introduction to the Template Engine and its purpose.                                    |
| [Template](reference/sui-template)                 | Introduction to the SUI template for defining the structure of a web page.                 |
| [Document](reference/sui-document)                 | Defining a new SUI document for displaying content.                                        |
| [Assets](reference/assets)                         | Managing assets like images, CSS, and JavaScript files.                                    |
| [Global Data](reference/global-data)               | Managing global data for SUI templates.                                                    |
| [Page](reference/sui-page)                         | Introduction to the SUI page for defining the layout of a web page.                        |
| [Template Syntax](reference/syntax)                | The syntax for writing SUI templates. Variables, expressions, loops, conditions, and more. |
| [Page as a Component](reference/Component)         | Using components to build reusable UI elements.                                            |
| [Component Communication](reference/communication) | Communicating between components in SUI templates.                                         |
| [Partial Rendering](reference/partial-render)      | Rendering a part of the SUI template instead of the whole page.                            |
| [Libsui](reference/libsui)                         | The fontend library for rendering SUI templates.                                           |
| [Event Handling](reference/event-handling)         | Handling events in SUI templates.                                                          |
| [Backend Script](reference/backend-script)         | Writing backend scripts for data integration.                                              |
| [SUI Request](reference/sui-request)               | Making requests to the backend for data retrieval.                                         |
| [Cache Control](reference/cache-control)           | Managing cache for SUI templates.                                                          |
| [I18n](reference/i18n)                             | Internationalization and localization for SUI templates.                                   |
| [TailwindCSS Integration](reference/tailwind)      | Integrating Tailwind CSS for styling SUI templates.                                        |