Selectors and Swaps

Start simple

The shortest valid RGX selector is just `#nav`.

When you only provide a selector, RGX uses it for both the response lookup and the target update, and it defaults to `outerHTML` on both sides.

selection: '#nav'
selection: '#site-main'

Add a location

Use `@innerHTML` when you only want to replace contents.

Use `@outerHTML` when you want to replace the element itself.

selection: '#nav@innerHTML'
selection: '#nav@outerHTML'

Point at a different target

Add `->` when the response selector and the target selector differ.

If you omit the target location, RGX still defaults it to `outerHTML`, which keeps the shorthand compact.

selection: '#nav@innerHTML->#site-main'
selection: '#nav@innerHTML->#site-main@innerHTML'

Multiple updates

You can chain multiple mappings in one request to update several regions at once, including navigation, content, or a modal shell.

That keeps your routes simple and makes server responses easy to reason about while still letting the page grow more advanced over time.

selection: '#nav #site-main@outerHTML->#site-main@outerHTML #modal-root@innerHTML->#modal-root@innerHTML'

Response conditions

Add a condition prefix when one rule should only run for a specific response path.

There is no special `ok:` token. The unprefixed selector is the normal success path, `redirect` is used when the browser followed a redirect, and `error` is used when the fetch response is not OK.

If you need status-specific branching like `200` or `404`, put that logic in preset triggers rather than selector prefixes.

selection: '#site-main@outerHTML->#site-main@outerHTML'
selection: 'redirect:#login-modal@innerHTML->#login-modal@innerHTML'
selection: 'error:#error-panel@innerHTML->#error-panel@innerHTML'