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.
Overlay demo
Modal Demo
Open a full-screen RGX modal overlay without leaving the page.
Modal shell
Overlay preview
Click a button and let RGX surface the modal over the page, just like a real response-driven overlay.
Preview
Invite teammates
The modal is a full-screen layer, so the demo feels like the browser received a response with a modal root already in it.
Modal
Invite teammates
RGX can update the page and the modal root in one response so the shell stays server-authored.
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-modal"}}
<section
class="tool-shell tool-shell-accent"
id="modal-shell"
data-example-tool="modal"
data-gx-url="/fragments/examples/modal"
data-gx-select="#modal-shell@outerHTML->#modal-shell@outerHTML #modal-root@innerHTML->#modal-root@innerHTML"
>
<header class="tool-shell-head">
<div>
<p class="eyebrow">Modal shell</p>
<h3>Overlay preview</h3>
<p>Show how RGX can update the page shell and the modal root in one response.</p>
</div>
<span class="tool-chip">RGX</span>
</header>
<div class="modal-demo">
<div class="modal-demo-screen">
<p class="eyebrow">Preview</p>
<h4>Invite teammates</h4>
<p>Click the button to reveal a modal shell that stays server-authored and easy to audit.</p>
<div class="tool-actions">
<button type="button" class="tool-button" data-modal-open>Open modal</button>
</div>
<div class="tool-status" id="modal-status" data-example-status>
<span class="tool-spinner" aria-hidden="true"></span>
<span data-example-status-text>Ready</span>
</div>
</div>
<div class="modal-demo-layer" id="modal-root" data-modal-layer hidden>
<div class="modal-demo-backdrop" data-modal-close></div>
<div class="modal-demo-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-demo-title" tabindex="-1" data-modal-dialog>
<div class="modal-demo-dialog-head">
<div>
<p class="eyebrow">Modal</p>
<h4 id="modal-demo-title">Invite teammates</h4>
</div>
<button type="button" class="modal-demo-close" data-modal-close aria-label="Close modal">×</button>
</div>
<p>RGX can update the page and the modal root in one response so the shell stays server-authored.</p>
<div class="modal-demo-actions">
<button type="button" class="tool-button" data-modal-close>Close</button>
<button type="button" class="tool-button tool-button-ghost" data-modal-close>Cancel</button>
</div>
</div>
</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) openInviteModal(w http.ResponseWriter, r *http.Request) {
view := loadPageView(r)
view.Modal = ModalView{
Title: "Invite teammates",
Message: "RGX can update the page shell and the modal root in one response.",
}
w.Header().Set("Recyclr-Use-Presets", "modal")
w.Header().Set("Recyclr-Event", "updated")
renderTemplate(w, "layouts/modal", view)
}