t-sui Framework
Server-rendered UI framework for TypeScript. All HTML generation, business logic, and state management occur on the server. Interactivity achieved through server actions and WebSocket patches.
Quick Start
import ui from "./ui";
import { MakeApp, Context } from "./ui.server";
const app = MakeApp("en");
app.Page("/", function(ctx: Context): string {
return app.HTML("Home", "bg-gray-100",
ui.Div("p-8")(
ui.Div("text-2xl font-bold")("Hello World"),
),
);
});
app.Listen(1423);
Documentation Index
| Topic |
File |
Description |
| Core Concepts |
CORE.md |
Architecture, Context, Actions, Targets, server rendering |
| UI Components |
COMPONENTS.md |
Buttons, inputs, forms, tables, alerts, cards, tabs, etc. |
| Data Management |
DATA.md |
Data collation, search, sort, filter, pagination, helpers |
| Server Setup |
SERVER.md |
App initialization, routes, WebSocket, PWA, assets |
| Best Practices |
PATTERNS.md |
Testing, validation, security, state management patterns |
Core Philosophy
- Server-Centric Rendering - All HTML generated server-side as strings
- String-Based Components - Components are TypeScript functions returning HTML strings
- Action-Based Interactivity - User interactions trigger server handlers returning HTML
- WebSocket-Enhanced - Real-time updates via
/__ws endpoint
- Type-Safe - Full TypeScript support with proper type definitions
Key Types
type Callable = (ctx: Context) => string // All handlers return HTML
type Attr = {
ID?: string;
Class?: string;
Value?: string;
OnClick?: string;
OnSubmit?: string;
// ... other HTML attributes
}
Common Imports
import ui from "./ui";
import { MakeApp, Context, Callable } from "./ui.server";
import { createCollate, TQuery, BOOL, SELECT } from "./ui.data";
Development Commands
npm run dev # Run examples (Node.js)
npm run dev:bun # Run examples (Bun)
npm run check # Type-check without emitting JS
npm test # Run Playwright tests
Runtime Support
- Node.js 18+ - Uses built-in
http module
- Bun 1.0+ - Uses native
serve() API for better performance
Both runtimes support WebSocket connections, session management, and form submissions.
1---2name: t-sui3description: Server-rendered TypeScript UI framework. Use when building t-sui applications, creating UI components, handling forms with server actions, using data tables, setting up routes, or implementing WebSocket patches. Triggered by "t-sui", "server-rendered UI", "TypeScript UI framework", form handling, or data collation.4---5
6# t-sui Framework
7
8Server-rendered UI framework for TypeScript. All HTML generation, business logic, and state management occur on the server. Interactivity achieved through server actions and WebSocket patches.
9
10## Quick Start
11
12```typescript
13import ui from "./ui";
14import { MakeApp, Context } from "./ui.server";
15
16const app = MakeApp("en");
17
18app.Page("/", function(ctx: Context): string {
19 return app.HTML("Home", "bg-gray-100",
20 ui.Div("p-8")(
21 ui.Div("text-2xl font-bold")("Hello World"),
22 ),
23 );
24});
25
26app.Listen(1423);
27```
28
29## Documentation Index
30
31| Topic | File | Description |
32|-------|------|-------------|
33| Core Concepts | [CORE.md](CORE.md) | Architecture, Context, Actions, Targets, server rendering |
34| UI Components | [COMPONENTS.md](COMPONENTS.md) | Buttons, inputs, forms, tables, alerts, cards, tabs, etc. |
35| Data Management | [DATA.md](DATA.md) | Data collation, search, sort, filter, pagination, helpers |
36| Server Setup | [SERVER.md](SERVER.md) | App initialization, routes, WebSocket, PWA, assets |
37| Best Practices | [PATTERNS.md](PATTERNS.md) | Testing, validation, security, state management patterns |
38
39## Core Philosophy
40
411. **Server-Centric Rendering** - All HTML generated server-side as strings
422. **String-Based Components** - Components are TypeScript functions returning HTML strings
433. **Action-Based Interactivity** - User interactions trigger server handlers returning HTML
444. **WebSocket-Enhanced** - Real-time updates via `/__ws` endpoint
455. **Type-Safe** - Full TypeScript support with proper type definitions
46
47## Key Types
48
49```typescript
50type Callable = (ctx: Context) => string // All handlers return HTML
51type Attr = {
52 ID?: string;
53 Class?: string;
54 Value?: string;
55 OnClick?: string;
56 OnSubmit?: string;
57 // ... other HTML attributes
58}
59```
60
61## Common Imports
62
63```typescript
64import ui from "./ui";
65import { MakeApp, Context, Callable } from "./ui.server";
66import { createCollate, TQuery, BOOL, SELECT } from "./ui.data";
67```
68
69## Development Commands
70
71```bash
72npm run dev # Run examples (Node.js)
73npm run dev:bun # Run examples (Bun)
74npm run check # Type-check without emitting JS
75npm test # Run Playwright tests
76```
77
78## Runtime Support
79
80- **Node.js 18+** - Uses built-in `http` module
81- **Bun 1.0+** - Uses native `serve()` API for better performance
82
83Both runtimes support WebSocket connections, session management, and form submissions.
majiayu000