Getting Started

Install

RGX ships as a CommonJS package, so you can require it in Node-based tooling or bundle it into a browser asset pipeline.

The npm package is intentionally small: the runtime, the docs, and the examples are all centered on the same HTML fragment model.

npm install recyclrjs

Drop into an existing site

The browser bundle exposes `window.Recyclr` and `window.GX`, so a plain script include is enough to make the runtime available across an existing website.

That lets you keep your current templates, wire up navigation first, and then expand the same pattern outward into forms, sidebars, and interactive panels.

<script defer src="/static/js/rgx.js"></script>
<script>
  window.Recyclr.mount(document);
</script>

Mount once

If you do not want Stimulus, attach the delegated listeners once at boot. That is enough for nav links, buttons, and forms with `data-gx-select`.

const Recyclr = require('recyclrjs');

Recyclr.mount(document);

Swap a fragment

Point an anchor or form at a server route and declare the selector you want to update. When the response arrives, RGX selects the matching node and swaps it into place.

If the target container appears in both the current page and the response, the browser history and scroll state can stay intact while the visible content changes.

<a href="/docs/selectors-and-swaps" data-gx-select="#site-main">Read the swap guide</a>

Optional adapter

The Stimulus controller remains available as an example adapter, but the site and runtime do not depend on it.

import { Controller } from '@hotwired/stimulus';

// Optional wrapper only.
export default class extends Controller { /* ... */ }