RxHTML - Reactive Frontend#

I wanted a way to build real-time UIs without writing any JavaScript. That's the whole pitch for RxHTML — you write HTML with special reactive attributes, the compiler turns it into JavaScript, and everything stays in sync with your Adama backend automatically.

What is RxHTML?#

RxHTML is not a framework where you learn some API and then go write JavaScript. You write HTML. You sprinkle in some reactive attributes. The compiler handles the rest:

• Establishing WebSocket connections to Adama documents
• Updating the DOM when data changes
• Turning form submissions into channel messages
• Managing authentication and routing
• Synchronizing view state between client and server

The end result is that changes in your Adama document show up in the browser immediately, and user actions flow back to the document. No glue code.

The Mental Model#

RxHTML operates on two reactive trees:

Data state flows from server to client. When your Adama document changes — tables, records, bubbles, whatever — those changes propagate to connected browsers automatically.

View state flows the other direction. User interactions update the view state, which gets sent to Adama asynchronously. Your Adama code reads it via the @viewer object to decide what data to send back. It's a feedback loop, and once you internalize it, building reactive UIs becomes surprisingly natural.

The Moving Parts#

RxHTML extends standard HTML with:

• Custom elements like <connection>, <lookup>, and <template>
• Reactive attributes like rx:if, rx:iterate, and rx:template
• Data binding in attributes using {path} syntax
• Event commands like rx:click with a simple command language

Chapters#

1. Fundamentals#

The core building blocks: the forest structure, pages, templates, and URI routing. How RxHTML organizes your application and handles navigation.

2. Data Binding#

Connecting your UI to Adama documents. Displaying data, handling forms, sending messages, and making interfaces that update themselves.

3. Advanced Patterns#

Conditionals, iteration, template composition, the behavior escape hatch, authentication flows, and error handling. The stuff you need when things get real.

4. Server-Side Pages#

Server-rendered pages with <server-shell> and <server-page>. Fetch data during rendering with <remote-inline> and produce complete HTML before sending to the browser.

5. Reference#

The full reference for all RxHTML elements, reactive attributes, events, Action Command Language (ACL), Attribute Template Language (ATL), data path syntax, configuration attributes, and type checking.

Getting Started#

If you went through the First Application tutorial, you've already seen RxHTML in action. This section goes deeper into everything it can do.

Start with Fundamentals to understand how RxHTML structures applications, then move on to Data Binding to wire up your UI.