> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Direct JSI nodes

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

```ts theme={null}
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:

```ts theme={null}
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`

```ts theme={null}
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](/js-ui/nodes). 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](/js-ui/react/introduction) for new components unless direct reconciliation is a requirement.