Interactive examples
Show the pattern, not a framework maze.
Each example is a concrete RGX application. Start with the Visual tab, then switch to Trigger HTML or Handler to see how a thin browser can still drive a full interface.
The examples page highlights the projects already using RGX in production.
Failure demo
Error Message
Queue validation, server, and success notices in a fixed on-screen toast rail.
Toast queue
Fixed notices
Click a button to push a notice into a floating queue that slides in, fades out, and never takes over the app shell.
Use the field to drive a validation notice, or fire the other buttons to queue server and success states.
Trigger HTML
RGX trigger and selector map
The HTML tab shows the request trigger and the selectors RGX uses to update the page.
{{define "example-error"}}
<section
class="tool-shell tool-shell-accent"
id="error-shell"
data-example-tool="error"
data-gx-url="/fragments/examples/error"
data-gx-select="#error-shell@outerHTML->#error-shell@outerHTML #error-queue@innerHTML->#error-queue@innerHTML"
>
<header class="tool-shell-head">
<div>
<p class="eyebrow">Toast queue</p>
<h3>Fixed notices</h3>
<p>Click a button to push a notice into a floating queue that slides in, fades out, and stays out of the way.</p>
</div>
<span class="tool-chip">RGX</span>
</header>
<div class="error-shell">
<div class="error-shell-copy">
<label class="tool-field">
<span>Email address</span>
<input data-error-email type="email" required value="not-an-email" spellcheck="false" placeholder="name@example.com">
</label>
<p class="error-shell-note">Use the field to drive a validation notice, or fire the other buttons to queue server and success states.</p>
</div>
<div class="tool-actions">
<button type="button" class="tool-button" data-error-validate>Queue validation error</button>
<button type="button" class="tool-button tool-button-ghost" data-error-server>Simulate server error</button>
<button type="button" class="tool-button tool-button-ghost" data-error-success>Queue success</button>
<button type="button" class="tool-button tool-button-ghost" data-error-reset>Reset</button>
</div>
<div class="tool-status" data-example-status>
<span class="tool-spinner" aria-hidden="true"></span>
<span data-example-status-text>Ready</span>
</div>
<div class="error-toast-queue" id="error-queue" data-error-queue aria-live="polite" aria-atomic="false"></div>
</div>
</section>
{{end}}Handler
Server response and headers
The handler tab shows the route code that returns the same UI with RGX headers and presets.
func (a *App) queueNotice(w http.ResponseWriter, r *http.Request) {
kind := strings.TrimSpace(r.FormValue("kind"))
email := strings.TrimSpace(r.FormValue("email"))
switch kind {
case "validation":
if _, err := mail.ParseAddress(email); err != nil {
w.Header().Set("Recyclr-Use-Presets", "toast:validation")
w.Header().Set("Recyclr-Event", "updated")
w.WriteHeader(http.StatusUnprocessableEntity)
renderTemplate(w, "examples/error", map[string]any{
"Kind": "validation",
"Title": "Validation error",
"Message": "Please enter a valid email address before retrying.",
"Meta": "422 Unprocessable Entity",
})
return
}
kind = "success"
fallthrough
case "success":
w.Header().Set("Recyclr-Use-Presets", "toast:success")
w.Header().Set("Recyclr-Event", "updated")
renderTemplate(w, "examples/error", map[string]any{
"Kind": "success",
"Title": "Saved",
"Message": "RGX can surface success notices from the same response path.",
"Meta": "200 OK",
})
default:
w.Header().Set("Recyclr-Use-Presets", "toast:server")
w.Header().Set("Recyclr-Event", "updated")
w.WriteHeader(http.StatusServiceUnavailable)
renderTemplate(w, "examples/error", map[string]any{
"Kind": "server",
"Title": "Server error",
"Message": "The request passed validation, but the server could not finish the update.",
"Meta": "503 Service Unavailable",
})
}
}