rxhtml reference acl atl elements attributes events

RxHTML Reference

Everything in one place — all the elements, reactive attributes, events, command language, and expression syntax. When you're building and need to look something up fast, this is the page.

Elements

Structure

Element Purpose
<forest> Root container for all templates and pages
<shell> HTML shell configuration (title, meta, scripts, links)
<page uri="..."> Routable page definition
<template name="..."> Reusable template definition
<common-page> Shared page configuration (see below)
<server-shell> Server-side HTML shell (see Server Pages)
<server-page uri="..."> Server-rendered page (see Server Pages)
<static-rewrite> Static URL redirect rules
<style> CSS styles extracted into output
<script is-custom> Custom JavaScript included in output

Data Connection

Element Purpose
<connection> WebSocket connection to an Adama document
<pick name="..."> Select a named connection
<connection-status> Connection status indicator
<domain-get> Domain-level data fetch
<document-get> Document-level data fetch
<custom-data src="..."> Custom data source

Display

Element Purpose
<lookup path="..."> Display a data field value
<trusted-html path="..."> Render HTML from a data field
<title value="..."> Dynamic page title
<monitor path="..."> Monitor a numeric value for changes

State

Element Purpose
<view-write path="..." value="..."> Write a value to view state
<view-state-params> Sync view state with URL parameters
<local-storage-poll> Poll local storage for changes
<exit-gate guard="..." set="..."> Navigation guard

Template

Element Purpose
<fragment> Template injection point (slot)
<inline-template name="..."> Dynamic template instantiation
<inline-iterate path="..."> Inline list iteration

Actions

Element Purpose
<signout> Sign out action
<file-attach> File upload handler

Development

Element Purpose
<todo-task> Developer task tracking

Common Page

The <common-page> element applies shared configuration to multiple pages matching a URI prefix:

<forest>
  <common-page uri:prefix="/admin" template:use="admin-layout" template:tag="div">
    <nav>Admin Navigation</nav>
  </common-page>

  <page uri="/admin/dashboard">
    <h1>Dashboard</h1>
  </page>

  <page uri="/admin/users">
    <h1>Users</h1>
  </page>
</forest>
Attribute Purpose
uri:prefix Match pages whose URI starts with this prefix
template:use Automatically wrap matching pages in this template
template:tag HTML tag for the template wrapper (default: none)

Children of <common-page> get injected into all matching pages. It's a good way to share navigation or layout across a section of your app without repeating yourself.

Reactive Attributes (rx:*)

Scope and Data Binding

Attribute Purpose
rx:scope="path" Change data scope to a child object
rx:iterate="path" Iterate over a list/table, rendering children per item
rx:repeat="path" Repeat element N times (integral value)
rx:replicate="path" Inline iterate shorthand
rx:expand-view-state Mirror data scope changes into view state

Conditional Rendering

Attribute Purpose
rx:if="path" Show element when condition is truthy
rx:ifnot="path" Show element when condition is falsy
rx:if="path=value" Show when path equals value
rx:if="decide:channel" Show based on channel decision
rx:if="choose:channel" Show based on channel choice
rx:if="chosen:channel" Show based on chosen state
rx:if="finalize:channel" Show based on finalization
rx:else Else branch for conditionals/connections
rx:switch="path" Switch on a value
rx:case="value" Case match within a switch

Templates and Composition

Attribute Purpose
rx:template="name" Use a named template
rx:wrap Wrap children in the element
rx:custom Custom rendering behavior
rx:behavior="name" Attach named JavaScript behavior

Input Binding

Attribute Purpose
rx:sync="path" Two-way sync input to view state
rx:sync:field="path" Sync a specific field to view state
rx:debounce="ms" Debounce sync updates (default: 100ms)
rx:link="path" Link element to view state path

Monitoring

Attribute Purpose
rx:monitor="path" Monitor an integral value, fires rise/fall events

Event Handling

Events are bound using rx:<event>="commands":

<button rx:click="toggle:view:show_panel">Toggle Panel</button>
<form rx:submit="send:create_item" rx:success="goto:/items">

All Events

Mouse:

Event Trigger
rx:click Element clicked
rx:mouseenter Mouse entered element
rx:mouseleave Mouse left element

Input:

Event Trigger
rx:blur Input lost focus
rx:focus Input gained focus
rx:change Input value changed

Keyboard:

Event Trigger
rx:keyup Key released
rx:keydown Key pressed

Checkbox:

Event Trigger
rx:check Checkbox checked
rx:uncheck Checkbox unchecked

Monitor:

Event Trigger
rx:rise Monitored value increased
rx:fall Monitored value decreased

List:

Event Trigger
rx:new New item appeared

Lifecycle:

Event Trigger
rx:load Element was rendered
rx:settle Data settled after changes
rx:settle-once Data settled (fires only once)
rx:ordered List ordering changed

Form:

Event Trigger
rx:submit Form submitted
rx:submitted Form submission sent
rx:success Form submission succeeded
rx:failure Form submission failed
rx:aftersync After view state sync completed

Delayed Events

Use rx:delay<event> to delay event handling:

<div rx:delayclick="goto:/slow-page">Delayed click</div>

Action Command Language (ACL)

ACL is the mini-language for event handler expressions. Commands are separated by | (pipe) or spaces.

<button rx:click="set:view:mode=edit | raise:view:dirty">Edit</button>
<button rx:click="fire:save | lower:view:dirty | goto:/saved">Save</button>

All Commands

Command Syntax Description
set set:path=value Set view state variable
raise raise:path Set to true
lower lower:path Set to false
toggle toggle:path Toggle boolean
increment inc:path or increment:path Increment number
decrement dec:path or decrement:path Decrement number
goto goto:/path Navigate to URL
fire fire:channel Fire a document channel
decide decide:channel Trigger channel decision
choose choose:channel|opt1|opt2 Present channel choices
finalize finalize:channel Finalize channel
submit submit Submit enclosing form
submit submit:id Submit form by element ID
reset reset Reset form
scroll scroll:element_id Scroll to element
scroll scroll:top or scroll:bottom Scroll to top/bottom
sign-out sign-out Sign out user
force-auth force-auth:provider Force authentication
reload reload Reload page
nuke nuke Clear connection data
resume resume Resume interrupted navigation
custom custom:functionName Call custom JavaScript function
order-toggle ot:path=value Toggle sort order
transfer-error te:path Transfer error message
toggle-password toggle-password:id Toggle password visibility
uncheck uncheck:path Uncheck checkbox

Attribute Template Language (ATL)

ATL is how you get dynamic attribute values with data binding expressions.

<img src="/avatar/{user_id}.png" alt="{name}" />
<a href="/user/{id}" class="user-link {role}">
<div class="{view:tab=home}active[#else]inactive[/view:tab]">

Syntax

Pattern Description
{var} Variable lookup from data scope
{view:var} Variable lookup from view state
{var|transform} Variable with transformation
[guard]text[/guard] Conditional text (show when guard truthy)
[guard]yes[#else]no[/guard] Conditional with else
[a=b]equal[/a] Equality conditional
% Auto variable (current iteration item)
text{var}more Concatenation of text and variables

Examples

<!-- Simple lookup -->
<span class="{status}">

<!-- Conditional class -->
<div class="tab [view:active=home]selected[/view:active]">

<!-- Conditional with else -->
<span class="[online]green[#else]gray[/online]">

<!-- Variable with transform -->
<span title="{created_at|time_ago}">

<!-- Mixed text and variables -->
<a href="/users/{id}/posts/{post_id}">

Data Path Syntax

Paths navigate the data and view state trees:

Syntax Meaning
field Simple field access
parent.child Nested field access
/field From root of scope
../field Parent scope
data:field Explicitly from data tree
view:field Explicitly from view state tree

URI Parameters

Page URIs support typed parameters:

Pattern Description
/users/$id Text parameter
/users/$id:number Numeric parameter
/files/$path* Suffix parameter (captures rest of path)

Configuration Attributes

These can go on any element:

Attribute Purpose
config:key="value" Pass configuration to behaviors/templates
for-env="test|dev" Include element only in listed environments
for-env-except="prod" Exclude element from listed environments
mobile:attr="value" Mobile-only attribute override (removed in web mode)
static:content Mark content as static HTML
children-only With rx:case, inject children without wrapper
protect-user-scroll="ms" Preserve scroll position on scrollable elements

Mobile Attributes

The mobile: prefix gives you mobile-specific overrides:

  • In Web mode: mobile: attributes are removed
  • In MobileApp mode: mobile:attr="value" gets promoted to attr="value", overwriting existing values
<div class="desktop-layout" mobile:class="mobile-layout">
  Content adapts to platform
</div>

Type Checking

RxHTML validates templates against Adama backend type reflections when reflection JSON is available.

What Gets Checked

  • Scope tracking: rx:scope and rx:iterate paths are validated against the backend schema
  • Path validation: All data path references (<lookup>, ATL expressions, conditions) are validated
  • Privacy enforcement: Field access is checked against the page's privacy filter
  • Channel validation: decide:, choose:, finalize: conditions validate channel existence
  • Unused tracking: Unused templates and backend fields are reported

Privacy Model

Pages declare their privacy context with the privacy attribute:

<page uri="/admin" privacy="is_admin,is_staff">
  <!-- Can access fields guarded by is_admin or is_staff policies -->
</page>

Field visibility levels in the backend:

Level Visible in templates?
"public" Always
"bubble" Always (computed per-viewer)
"private" Never
["policy1", "policy2"] Only when all listed policies are in the page's privacy set
Previous Server Pages
Next Api