t-sui

Development

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.

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/majiayu000/claude-skill-registry/blob/HEAD/skills/data/t-sui/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/t-sui, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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.