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.
Pattern demo
Regex Tester
Test patterns, flags, and highlighted matches with live feedback.
Regex tester
Pattern, flags, and highlighted matches
Use it for quick validation when you want to keep the browser UI thin.
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-regex"}}
<form
class="tool-shell"
id="regex-shell"
action="/examples/regex"
method="post"
data-gx-url="/fragments/examples/regex"
data-gx-select="#regex-shell@outerHTML->#regex-shell@outerHTML #regex-preview@innerHTML->#regex-preview@innerHTML #regex-matches@innerHTML->#regex-matches@innerHTML"
>
<header class="tool-shell-head">
<div>
<p class="eyebrow">Regex tester</p>
<h3>Pattern, flags, and highlighted matches</h3>
<p>Use it for quick validation when you want to keep the browser UI thin.</p>
</div>
<span class="tool-chip">RGX</span>
</header>
<div class="tool-field-grid">
<label class="tool-field">
<span>Pattern</span>
<input name="pattern" data-regex-pattern type="text" value="RGX" spellcheck="false">
</label>
<label class="tool-field">
<span>Flags</span>
<input name="flags" data-regex-flags type="text" value="gi" spellcheck="false">
</label>
</div>
<label class="tool-field">
<span>Sample text</span>
<textarea name="sample" data-regex-text spellcheck="false">RGX powers navigation. RGX powers examples. RGX powers real UI.</textarea>
</label>
<div class="tool-output">
<div class="tool-status" data-example-status>Ready</div>
<div class="regex-preview" id="regex-preview" data-regex-preview aria-live="polite"></div>
<ul class="regex-matches" id="regex-matches" data-regex-matches></ul>
</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) updateRegex(w http.ResponseWriter, r *http.Request) {
pattern := strings.TrimSpace(r.FormValue("pattern"))
flags := strings.TrimSpace(r.FormValue("flags"))
sample := r.FormValue("sample")
preview, matches, err := buildRegexPreview(pattern, flags, sample)
if err != nil {
w.WriteHeader(http.StatusUnprocessableEntity)
}
w.Header().Set("Recyclr-Use-Presets", "regex")
w.Header().Set("Recyclr-Event", "updated")
renderTemplate(w, "examples/regex", map[string]any{
"Pattern": pattern,
"Flags": flags,
"Sample": sample,
"Preview": preview,
"Matches": matches,
"Error": err,
})
}