Syntax reference

Use this page to look up .gsx syntax. If you are new to gsx, follow Learn gsx first for a guided path.

Start here

1. Basic syntax — files, imports, and component declarations
2. Elements — tags, nesting, void elements, and documents
3. Interpolation — Go expressions and interpolated literals
4. Attributes — static, dynamic, conditional, and spread attributes
5. Control flow — if, for/range, and switch
6. Composition — component calls, children, slots, and forwarding
7. Component signatures — exact inputs, options values, and direct Go calls

More topics

• Styling and scripts: Styling, JavaScript, and Forms
• Security and raw output: Escaping and Raw HTML
• Client-side patching: Processing instructions
• Go, context, interop, and runtime helpers: Raw Go, Comments, Fragments, Pipelines, Context, Interop, and Runtime helpers

Build constraints and //go: directives

File-level Go directives before the package clause apply to the generated Go file. The Go toolchain, not gsx, evaluates build constraints; see the Go documentation for build constraints.

Build-tag variants may declare the same component when their constraints are mutually exclusive and their signatures match:

// platform_linux.gsx
//go:build linux

package views

component PlatformName() {
	<span>Linux</span>
}

// platform_other.gsx
//go:build !linux

package views

component PlatformName() {
	<span>Other</span>
}

Generation processes both files; go build selects the matching variant.

Quick reference

Declarations

Form	Meaning
component Card(title string) { … }	Component declaration
component List[T any](items []T) { … }	Generic component
component (p Page) Header() { … }	Method component

Body forms

Form	Meaning
<div>…</div>	Element
{ expr }	Escaped Go expression
{ if … }, { for … }, { switch … }	Control flow
{{ stmt }}	GoBlock
<>…</>	Fragment
{/* … */}	Content comment
{ value |> filter }	Pipeline
js`...`, css`...` in Go	Contextual Go value
<?marker name=VALUE>, <?start name=VALUE>…<?end>	Processing instructions

Attribute forms

Form	Meaning
name="value"	Static attribute
name={expr}	Expression attribute
disabled, disabled={cond}	Boolean attribute
{ if cond { name="value" } }	Conditional attributes
{ attrs... }	Attribute spread
attrs={{ "name": value }}	Ordered attribute literal
name=f`prefix-@{value}`	Interpolated literal
class={ … }, style={ … }	Composable styling
@click=js`save(@{id})`	JavaScript attribute

Component forms

Form	Meaning
<Card title="Hi"/>	Component call
<ui.Button/>	Cross-package call
<List[string] items={items}/>	Explicit type arguments
<Card>…</Card>	Nested children
header={ <h2>Title</h2> }	Named slot
{children}	Children placement
<Inner { attrs... }/>	Attribute forwarding
<Card opts={opts}/>	Explicit value forwarding

Status — alpha. Check Status and the roadmap before relying on deferred features.