Basic syntax

A .gsx file combines ordinary Go with component declarations and JSX-like markup. Start here to see the shape of a file and how gsx decides whether a tag is an HTML element or a component.

Package and imports

Begin with a package declaration and import any packages used by your Go code. You only need to import github.com/gsxhq/gsx when you refer to runtime names such as gsx.Node, gsx.Raw, or gsx.Attrs yourself.

package views

import "github.com/gsxhq/gsx"

func wrap(n gsx.Node) gsx.Node { return n }

Declare a component

A component has a name, typed parameters, and a markup body. The body is the result, so it has no return type or return statement.

package views

component Greeting(name string, count int) {
	<p>Hello, { name }! You have { count } messages.</p>
}

Renders:

<p>Hello, World! You have 3 messages.</p>

▶ Open in Playground

The authored parameter list determines how Go and markup callers pass values. See Component signatures.

Element or component?

Lowercase and hyphenated tags normally render HTML elements. Capitalized and dotted tags call components, and a lowercase tag also calls a package-level declaration with the same name.

Tag	Meaning
<div>	HTML element when div is not declared
<my-card>	HTML custom element
<Card>	component
<ui.Button>	qualified component
<card>	component when card is declared in the package

No registration is required. See Elements for element syntax.

Lowercase wrapper components

A lowercase component can wrap the HTML element with the same name. Inside component div, the self-named <div> stays an element instead of calling the component recursively.

package views

import "github.com/gsxhq/gsx"

component div(children gsx.Node, attrs gsx.Attrs) {
	<div { attrs... }>{ children }</div>
}

component Page() {
	<div class="card">Hello</div>
}

Renders:

<div class="card">Hello</div>

▶ Open in Playground

Other lowercase tags still follow the normal declaration rule. To recurse from a lowercase component, use an ordinary Go call rather than a self-named tag.