Direct JSI nodes - EXPRESSO Docs

Direct node integration lets you build the native UI tree without React. Use it when integrating another renderer or when you need explicit control over node creation and mutation.

Create a root

const root = new RootNode();
const label = root.createNode("text", { text: "Hello" });

root.appendChild(label);
root.prepareForCommit();
root.resetAfterCommit();

`UIContainer`

RootNode creates a UIContainer with these operations:

root.createNode(type: string, props: object): UINode;
root.shouldSetTextContent(type: string, props: object): boolean;
root.appendChild(node: UINode): void;
root.removeChild(node: UINode): void;
root.insertBefore(newNode: UINode, existingNode: UINode): void;
root.clearChildren(): void;
root.prepareForCommit(): void;
root.resetAfterCommit(): void;
root.dispose(): void;

`UINode`

node.updateProperty(name: string, value: unknown): void;
node.removeProperty(name: string): void;
node.updateProps(props: object, previousProps?: object): void;
node.setHidden(hidden: boolean): void;
node.resetTextContent(): void;
node.commitTextUpdate(previous: string, next: string): void;
node.appendChild(child: UINode): void;
node.removeChild(child: UINode): void;
node.insertBefore(newNode: UINode, existingNode: UINode): void;
node.clearChildren(): void;
node.dispose(): void;

Detach nodes from their parent before disposing them.

Node types

The React integration supports the nodes listed in the Nodes reference. The bottomSheet and gestureDetector nodes are experimental. The direct-node API does not add intrinsic JSX nodes that are absent from the React declaration surface.

Direct-node guidance

Keep all mutations on the runtime’s UI execution path.
Pass the previous props when removing properties that disappeared from a render pass.
Detach children before tearing down a subtree.
Prefer React UI for new components unless direct reconciliation is a requirement.