t-sui

michalCapo's avatarfrom michalCapo

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 6, 2026
[Code Generation]

When & Why to Use This Skill

t-sui is a high-performance, server-rendered TypeScript UI framework designed to streamline web application development. By centralizing HTML generation, business logic, and state management on the server, it enables developers to build type-safe, interactive interfaces using server actions and WebSocket patches, significantly reducing client-side complexity and improving performance.

Use Cases

  • Building high-performance, SEO-friendly web applications using server-side rendering (SSR) with TypeScript.
  • Developing interactive UI components and complex forms that handle logic and state via server actions.
  • Implementing real-time data updates and live UI patches in web apps using integrated WebSocket support.
  • Creating data-intensive dashboards with built-in support for data collation, filtering, sorting, and pagination.
  • Rapidly prototyping type-safe web services compatible with both Node.js and Bun runtimes.
namet-sui
descriptionServer-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.
allowed-toolsRead, Grep, Glob, Bash, Edit, Write

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

  1. Server-Centric Rendering - All HTML generated server-side as strings
  2. String-Based Components - Components are TypeScript functions returning HTML strings
  3. Action-Based Interactivity - User interactions trigger server handlers returning HTML
  4. WebSocket-Enhanced - Real-time updates via /__ws endpoint
  5. 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.