# GSX Syntax Reference ## Overview `.gsx` files are Go source files extended with a template syntax for declaring UIs. The `tui generate` command reads `.gsx` files and produces `_gsx.go` files containing standard Go code. You never edit the generated files by hand. A `.gsx` file can contain: - A `package` declaration and `import` block (standard Go) - Type declarations and regular Go functions (`type`, `func`) - Pure template components (`templ Name(params) { ... }`) - Struct method components (`templ (s *Struct) Render() { ... }`) - Control flow directives (`if`, `for`, `:=`) - HTML-like elements (`
`, ``, etc.) ## File structure Every `.gsx` file starts with a standard Go package and import block: ```gsx package mypackage import ( "fmt" tui "github.com/grindlemire/go-tui" ) ``` The rest of the file can mix Go declarations (types, functions, variables) with `templ` component definitions in any order. ## Component syntax ### Pure components A pure component is a stateless function that takes parameters and returns UI elements. Define one with the `templ` keyword: ```gsx templ Greeting(name string) { {"Hello, " + name} } ``` Parameters use standard Go function parameter syntax. Any valid Go type works: ```gsx templ UserList(users []string, maxVisible int) {
for i, u := range users { if i < maxVisible { {u} } }
} ``` ### Children slot Pure components can accept nested content from their caller using `{children...}`: ```gsx templ Card(title string) {
{title} {children...}
} ``` Call it with children: ```gsx All systems operational ``` `{children...}` is only available in pure `templ` components, not in struct method components. ### Struct method components A struct component has its own state and lifecycle. Define the render method with `templ` using a receiver: ```gsx type counter struct { count *tui.State[int] } func Counter() *counter { return &counter{ count: tui.NewState(0), } } templ (c *counter) Render() {
{fmt.Sprintf("Count: %d", c.count.Get())}
} ``` The method name must be `Render` and it takes no parameters. The receiver can be a pointer or value type, though pointer receivers are standard. ### Calling components Call a pure component like an element, passing parameters as attributes: ```gsx Some content ``` Component names must start with an uppercase letter to distinguish them from built-in elements. ### Regular Go functions Standard Go functions work normally in `.gsx` files: ```gsx func formatPercent(v, max int) string { if max == 0 { return "0%" } return fmt.Sprintf("%d%%", v*100/max) } ``` These are passed through to the generated file without transformation. ## Elements ### Container elements These elements can have children and support flexbox layout attributes. **`
`** -- Block container, and the main layout element. Default direction is row. ```gsx
First Second
``` **`
    `** -- Unordered list container. Use with `
  • ` children. ```gsx
    • Item one
    • Item two
    ``` **`
  • `** -- List item. Renders with a bullet prefix. Should be a child of `
      `. **``** -- Table container for tabular data. Supports all container attributes. ### Text elements These hold text content and support text styling but not flex container attributes like `direction` or `justify`. **``** -- Inline text container for styled text content. ```gsx Status: OK ``` **`

      `** -- Paragraph element for text blocks. ### Interactive elements **` ``` **``** -- Single-line text input. Self-closing. Bind `value` to a `*State[string]` for two-way binding. Also accepts `placeholder`, `width`, `border`, `focusColor`, `borderGradient`, `focusGradient`, `onSubmit`, and `onChange`. ```gsx ``` **`