g-sui

Category: Development & Coding | Uploader: michalCapo | Downloads: 0 | Version: v1.0（Latest）

Server-rendered Go UI framework. Use when building g-sui applications, creating UI components, handling forms with server actions, using data tables, setting up routes, implementing WebSocket patches, or working with the reverse proxy package. Triggered by "g-sui", "server-rendered UI", "Go UI framework", form handling, data collation, or reverse proxy.

Changelog: Source: GitHub https://github.com/michalCapo/g-sui

Directory Structure

Current level: docs/skills/

📄 CLIENT.md 46.4 KB
📄 COMPONENTS.md 22.0 KB
📄 CORE.md 11.1 KB
📄 DATA.md 7.8 KB
📄 PATTERNS.md 15.1 KB
📄 SERVER.md 18.6 KB
📄 SKILL.md 5.0 KB

SKILL.md

---
name: g-sui
description: Server-rendered Go UI framework. Use when building g-sui applications, creating UI components, handling forms with server actions, using data tables, setting up routes, implementing WebSocket patches, or working with the reverse proxy package. Triggered by "g-sui", "server-rendered UI", "Go UI framework", form handling, data collation, or reverse proxy.
allowed-tools: Read, Grep, Glob, Bash, Edit, Write
---

# g-sui Framework

Server-rendered UI framework for Go. All HTML generation, business logic, and state management occur on the server. Interactivity achieved through server actions and WebSocket patches.

## Quick Start

```go
package main

import "github.com/michalCapo/g-sui/ui"

func main() {
    app := ui.MakeApp("en")

    app.Page("/", "Home", func(ctx *ui.Context) string {
        return app.HTML("Home", "bg-gray-100",
            ui.Div("p-8")(
                ui.Div("text-2xl font-bold")("Hello World"),
            ),
        )
    })

    app.Listen(":8080")
}
```

## Documentation Index

| Topic | File | Description |
|-------|------|-------------|
| Core Concepts | [CORE.md](CORE.md) | Architecture, Context, Actions, Targets, server rendering |
| UI Components | [COMPONENTS.md](COMPONENTS.md) | Buttons, inputs, forms, tables, alerts, cards, tabs, etc. |
| Data Management | [DATA.md](DATA.md) | Data collation, search, sort, filter, pagination, Excel export |
| Server Setup | [SERVER.md](SERVER.md) | App initialization, routes, WebSocket, PWA, assets |
| Best Practices | [PATTERNS.md](PATTERNS.md) | Testing, validation, security, state management |
| Client Rendering | [CLIENT.md](CLIENT.md) | Hybrid client-side rendering (`js` package), tables, charts, custom components |

## Core Philosophy

1. **Server-Centric Rendering** - All HTML generated server-side as strings
2. **String-Based Components** - Components are Go 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. **Multitenant Support** - Multiple app instances with different URL prefixes
6. **Automatic Compression** - Gzip compression for supported clients

## Multitenant Apps (New in v0.111.17+)

Mount multiple isolated apps on different URL prefixes:

```go
adminApp := ui.MakeApp("en")
publicApp := ui.MakeApp("en")

mainMux := http.NewServeMux()
adminApp.Mount("/admin", mainMux)   // Routes at /admin/*
publicApp.Mount("", mainMux)        // Routes at /*

http.ListenAndServe(":8080", mainMux)
```

Each app has isolated sessions, routes, and WebSocket connections (`/admin/__ws`, `/__ws`).

## Performance Features (New in v0.111.16+)

- **Gzip Compression** - Automatic for clients with `Accept-Encoding: gzip`
- **Route Manifest Caching** - Cached on first access, invalidated on route changes

## Key Types

```go
type Callable = func(*ui.Context) string  // All handlers return HTML
type Attr struct { ID, Class, Value, OnClick, OnSubmit, ... }  // HTML attributes
```

## Common Imports

```go
import "github.com/michalCapo/g-sui/ui"      // Server-rendered components
import "github.com/michalCapo/g-sui/js"      // Client-side rendered zones (tables, charts)
import "github.com/michalCapo/g-sui/proxy"   // Reverse proxy (HTTP + WebSocket)
```

## `js` Package Helpers

Beyond the `js.Client` builder, the `js` package provides standalone Go helper components that emit self-contained `<script>` blocks:

| Helper | Description |
|--------|-------------|
| `js.LiveSearch(selector, inputID, class)` | Real-time filtering of server-rendered elements |
| `js.ContentSearch(container, triggerKey)` | In-page text search with highlights (like Ctrl+F) |
| `js.Autocomplete(inputID, sourceURL, class)` | Input with API-backed datalist |
| `js.AsyncButton(label, url, resultID, class)` | Button that POSTs and shows result |
| `js.AutoFill(selectID, mappings)` | Auto-populate fields on select change |
| `js.AjaxForm(formID, opts)` | Intercept form submit, use fetch |
| `js.SPA(id, class)` + `js.SPALink(...)` | Client-side SPA navigation |
| `js.ExternalLink(url, class, content)` | Link bypassing SPA interception |
| `js.Shortcuts()` + `js.RegisterShortcut(...)` | Keyboard shortcut framework |
| `js.Toast(message, variant)` | Trigger toast on page load |
| `js.Script(body)` | Wrap JS in self-executing IIFE |

## Development Commands

```bash
go run examples/main.go      # Run example app
go test ./...                # Run all tests
go test ./ui/...             # Test UI package
go build                     # Build project
./deploy                     # Create and push new version tag
```

## Releases

To create a new version release:

```bash
./deploy
```

The `deploy` script automatically:
- Starts at version `v0.100` if no tags exist
- Increments the minor version by 1 (e.g., `v0.100` → `v0.101` → `v0.102`)
- Ensures working tree is clean before tagging
- Creates an annotated git tag and pushes to remote

Version numbering: `v0.XXX` format, auto-incremented from `v0.100`.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

g-sui

Directory Structure

SKILL.md

Report

Notice