Go Green

One request. Many updates.

RGX is a drop-in runtime for server-rendered websites. It keeps state, redirects, templates, and defaults on the server while the browser handles navigation, multi-target partial swaps, loading states, and realtime updates.

Install RGX Read the docs View examples

No Stimulus required. Use window.Recyclr or window.GX and start with navigation before expanding outward.

Quick start

npm

npm install recyclrjs

const Recyclr = require('recyclrjs')

Recyclr.mount(document)

9 docs pages

1 interactive demo

1 script tag to start

Why teams pick RGX

Server-rendered HTML, modern navigation, and no client framework lock-in.

Use RGX when you want the browser to stay thin, the server to stay authoritative, and the page to keep its structure even as the content changes.

vanilla

Drop-in integration

Add one script tag, use the global `Recyclr` object, and start with navigation before expanding outward to forms, sidebars, or modals.

swap

Fragment-first routing

Serve full pages and partial shells from the same handlers, then swap the nav and main regions together when JavaScript is active.

bundle

Multi-target updates

Swap several DOM regions from one response so navigation, content, and supporting UI stay in sync without chained requests.

header

Header-driven presets

Publish alternate swap shapes and event names with `Recyclr-Use-Presets` and `Recyclr-Event` when the server already knows the layout it needs.

stream

Realtime-ready

Feed WebSocket or SSE payloads into the same render pipeline you already use for normal requests.

adopt

Incremental adoption

Start with navigation, then expand into forms, sidebars, and modals one region at a time.

Install and adopt

Plug RGX into an existing site first, then grow outward.

The cleanest adoption path starts with navigation, then expands into forms, sidebars, and modals once the team sees the pattern working.

Mount once

Expose the global bundle and call window.Recyclr.mount(document) at boot. The runtime can live alongside existing markup without a framework rewrite.

Target the right shell

Use short selectors like #site-main or #site-nav. Keep fallback links and forms valid, then let RGX upgrade them when JavaScript is available.

Move complexity to the server

Use templates, preset bundles, and a request-scoped view model to keep the browser logic tiny and let one response coordinate several DOM updates.

Go Green

One response can update many regions.

Let Blade, Go templates, or your server renderer own the shell, empty states, redirects, and shared request state. RGX can swap nav, content, alerts, and modal shells in one request, with preset bundles and response headers keeping the server in control.

data-gx-select="#site-nav@outerHTML->#site-nav@outerHTML #site-main@outerHTML->#site-main@outerHTML #modal-root@innerHTML->#modal-root@innerHTML"

Recyclr-Use-Presets: dashboard modal
Recyclr-Event: updated

Multi-target swaps

Preset bundles

Response headers

Modal shells

Documentation

Start with install, then jump into runtime behavior, redirects, selectors, and realtime.

Getting Started Install RGX, mount the browser runtime, and replace your first fragment. Read the guide Fragment Routes Serve full documents and partial shells from the same Go handlers. Read the guide Selectors and Swaps Start with `#nav`, then layer in locations, targets, conditions, and multi-target swaps. Read the guide Recommended Usage Keep state on the server, let templates own the defaults, and use preset bundles when selectors need to stay short. Read the guide Redirects and Headers Use standard HTTP redirects and Location headers when the server needs to move the browser. Read the guide Runtime Model Understand how RGX reuses one browser instance, turns requests into fragments, and dispatches updates. Read the guide

Interactive

Try the examples

Calculator, fake IM, modal, error message, JSON formatter, and regex tester demos with RGX trigger HTML and matching server handlers.

Open examples

Frequently asked

Questions the team will ask before adopting RGX.

What is RGX?

RGX is a fragment-first runtime for server-rendered HTML. It keeps the server in charge of state, redirects, and templates while the browser handles navigation, partial swaps, and realtime updates.

Do I need Stimulus to use it?

No. `window.Recyclr.mount(document)` is enough to wire up navigation, forms, and other delegated interactions. Stimulus remains optional as an adapter for teams that already use it.

How do redirects work?

Return a normal HTTP redirect with a `Location` header. RGX follows the final URL, so auth gates and route decisions stay on the server.

Can I adopt RGX gradually in an existing app?

Yes. Start with one shell, usually navigation or a main content region, then expand into forms, modals, sidebars, and realtime updates as your team is ready.

Can RGX update more than one region at once?

Yes. A single response can target multiple DOM regions, and preset bundles plus response headers let the server choose the swap shape and follow-up event without chaining extra requests.

Is RGX good for realtime dashboards?

Yes. RGX works well for dashboards that need frequent updates across multiple regions, like counters, tables, badges, alerts, and side panels. A single response can keep those pieces in sync without chained requests or a complicated client-side architecture.