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.
Interactive demo
Calculator
A fully functional calculator with a simplified interface and instant evaluation.
Calculator
Simple arithmetic
Buttons and keyboard input both update the live result.
Expression
0
Ready
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-calculator"}}
<form
class="tool-shell"
id="calculator-shell"
action="/examples/calculator"
method="post"
data-gx-url="/fragments/examples/calculator"
data-gx-select="#calculator-shell@outerHTML->#calculator-shell@outerHTML"
>
<header class="tool-shell-head">
<div>
<p class="eyebrow">Calculator</p>
<h3>Server-led arithmetic</h3>
<p>Post a tiny expression payload, swap the shell, and keep the browser thin.</p>
</div>
<span class="tool-chip">RGX</span>
</header>
<input type="hidden" name="expression" value="0">
<div class="calc-display" aria-live="polite">
<span class="calc-label">Expression</span>
<output name="expression" data-calc-expression>0</output>
<strong name="result" data-calc-result>0</strong>
</div>
<div class="calc-grid" aria-label="Calculator keys">
<button type="submit" class="calc-key calc-key-action" name="token" value="clear">AC</button>
<button type="submit" class="calc-key calc-key-action" name="token" value="back">⌫</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value="(">(</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value=")">)</button>
<button type="submit" class="calc-key" name="token" value="7">7</button>
<button type="submit" class="calc-key" name="token" value="8">8</button>
<button type="submit" class="calc-key" name="token" value="9">9</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value="/">÷</button>
<button type="submit" class="calc-key" name="token" value="4">4</button>
<button type="submit" class="calc-key" name="token" value="5">5</button>
<button type="submit" class="calc-key" name="token" value="6">6</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value="*">×</button>
<button type="submit" class="calc-key" name="token" value="1">1</button>
<button type="submit" class="calc-key" name="token" value="2">2</button>
<button type="submit" class="calc-key" name="token" value="3">3</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value="-">−</button>
<button type="submit" class="calc-key" name="token" value="0">0</button>
<button type="submit" class="calc-key" name="token" value=".">.</button>
<button type="submit" class="calc-key calc-key-equals" name="token" value="=">=</button>
<button type="submit" class="calc-key calc-key-operator" name="token" value="+">+</button>
</div>
</form>
{{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) updateCalculator(w http.ResponseWriter, r *http.Request) {
expression := strings.TrimSpace(r.FormValue("expression"))
token := strings.TrimSpace(r.FormValue("token"))
nextExpression := applyCalculatorToken(expression, token)
result, err := evaluateCalculator(nextExpression)
if err != nil {
w.WriteHeader(http.StatusUnprocessableEntity)
}
w.Header().Set("Recyclr-Use-Presets", "calculator")
w.Header().Set("Recyclr-Event", "updated")
renderTemplate(w, "examples/calculator", map[string]any{
"Expression": nextExpression,
"Result": result,
"Error": err,
})
}