Hello world
The walking skeleton: one template, one route, one rendered page.
hello.ghtmx
package helloworld
import "github.com/go-monolith/ghtmx/ghtmxgen"
templ page(name string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>ghtmx walking skeleton</title>
@ghtmxgen.HTMXScript()
<style>
:root { --primary: #008391; --bg: #f5f6f7; --surface: #ffffff; --text: #1c1e21; --muted: #525860; --border: #dadde1; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
:root { --primary: #dbbc30; --bg: #1b1b1d; --surface: #242526; --text: #e3e3e3; --muted: #a5adba; --border: #444950; }
}
* { box-sizing: border-box; }
body {
font-family: system-ui, sans-serif; margin: 0; min-height: 100vh;
background: var(--bg); color: var(--text);
display: flex; justify-content: center; align-items: flex-start;
}
.app {
width: min(36rem, 92vw); margin: 3rem 0; padding: 1.6rem 1.8rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: .6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.badge {
display: inline-block; font-size: .72rem; font-weight: 600;
color: var(--primary); border: 1px solid var(--primary);
border-radius: 999px; padding: .1rem .6rem; margin-bottom: .8rem;
}
h1 { margin: 0 0 .4rem; font-size: 1.5rem; }
.tagline { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }
button, a.action {
font-size: .9rem; padding: .45rem .9rem; border-radius: .45rem; cursor: pointer;
border: 1px solid var(--border); background: var(--bg); color: inherit;
text-decoration: none; display: inline-block;
}
button:hover, a.action:hover { border-color: var(--primary); color: var(--primary); }
table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
td { padding: .5rem .3rem; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
td:last-child { text-align: right; }
form { display: flex; gap: .6rem; }
input {
flex: 1; font-size: 1rem; padding: .5rem .8rem; border-radius: .45rem;
border: 1px solid var(--border); background: var(--bg); color: inherit;
}
form button { border-color: var(--primary); background: var(--primary); color: var(--surface); }
</style>
</head>
<body>
<main class="app">
<span class="badge">ghtmx example</span>
@greeting(name)
<p class="tagline">This page travelled the full path from .ghtmx source to bytes in your browser.</p>
<form method="get" action={ ghtmx.URL(ghtmxgen.HomePath) }>
<input type="text" name="name" placeholder="Say hello to…" autocomplete="off"/>
<button type="submit">Greet</button>
</form>
</main>
</body>
</html>
}
templ greeting(name string) {
<h1>Hello, { name }!</h1>
}
helloworld.go
// The ghtmx walking skeleton: a minimal net/http application rendering a
// generated component, proving the full path from .ghtmx source to bytes in
// a browser (FR-090). It imports only the ghtmx runtime — no adapter and no
// compiler package (NFR-011, NFR-012).
//
// Run it with:
//
// ghtmx generate && go run ./cmd
package helloworld
import (
"net/http"
)
func home(w http.ResponseWriter, r *http.Request) {
name := r.URL.Query().Get("name")
if name == "" {
name = "World"
}
if err := page(name).Render(r.Context(), w); err != nil {
http.Error(w, "failed to render", http.StatusInternalServerError)
}
}
// Routes builds the example's router; the official docs site mounts
// it as a live demo.
func Routes() *http.ServeMux {
mux := http.NewServeMux()
mux.HandleFunc("GET /hello", home)
return mux
}
cmd/main.go
// Command helloworld serves the hello-world example standalone.
package main
import (
"fmt"
"net/http"
"os"
example "github.com/go-monolith/ghtmx/examples/hello-world"
)
func main() {
addr := "127.0.0.1:8080"
if v := os.Getenv("GHTMX_EXAMPLE_ADDR"); v != "" {
addr = v
}
fmt.Printf("Listening on http://%s/hello\n", addr)
if err := http.ListenAndServe(addr, example.Routes()); err != nil {
fmt.Fprintln(os.Stderr, err)
os.Exit(1)
}
}