I Built Rillio: A JSX UI Runtime Using Addressable DOM Instead of Virtual DOM

Description and use

Rillio is an experimental UI runtime that uses an addressable DOM and a flat index instead of a virtual DOM, enabling direct node access by ID and managing updates through a single patch engine.

Problem

Existing UI runtimes rely on a Virtual DOM tree as the main source of truth, which can lead to unnecessary DOM mutations and complexity in managing node identity and updates.

Outcome

Rillio demonstrates that a flat, addressable DOM registry can replace a virtual DOM tree, offering direct node access and potentially reducing unnecessary DOM mutations for certain workloads, while introducing new challenges in transaction validation and lifecycle management.

Workflow

• Define a FlatNode interface with id, parentId, prevSibling, nextSibling, firstChild, lastChild, version, and node fields.
• Maintain a registry mapping NodeId to FlatNode records.
• Use a Patch Engine to batch DOM operations such as setText, move, and remove, validating each transaction before applying.
• Render JSX components with familiar syntax; under the hood, Rillio uses the Flat Index and Patch Engine to manage DOM identity and updates.
• Implement reactive state APIs (e.g., useState) that trigger Patch Engine operations when state changes.
• Handle transaction validation, rollback, and edge cases like moving a parent into its descendant.
• Test correctness with randomized consistency testing, ensuring the Flat Index matches the actual DOM.
• Benchmark Rillio against other runtimes for keyed lists, text updates, and DOM reordering to identify workloads that benefit from stable node identity.
• Iterate on transaction validation, testing, nested DOM handling, cost-aware patch planning, and potential compiler optimizations.

Evidence

In Rillio, every managed DOM node gets a stable NodeId.

Source

Another design decision was to keep DOM mutations behind a single Patch Engine.

Source

I generate sequences of DOM updates and check whether the Flat Index still agrees with the actual DOM.

Source