# hydrateRoot

**Kind:** Function

**Source:** [`src/jsx/dom/client.ts`](https://github.com/honojs/hono/blob/main/src/jsx/dom/client.ts#L76)

**Part of:** [Jsx](subsystem-src-jsx)

Create a root object and hydrate app to the target element.
In hono/jsx/dom, hydrate is equivalent to render.

`hydrateRoot` creates a root object for a target DOM element and hydrates the application into that element. In `hono/jsx/dom`, hydration follows the same rendering behavior as `render`, connecting JSX output to the existing target container.

## Signature

```ts
function hydrateRoot(element: HTMLElement | DocumentFragment, reactNode: Child, options: RootOptions): Root
```

## Parameters

| Name | Type |
|---|---|
| `element` | `HTMLElement | DocumentFragment` |
| `reactNode` | `Child` |
| `options` | `RootOptions` |

**Returns:** `Root`

## Diagram

```mermaid
graph LR
  App[JSX application] --> Hydrate[hydrateRoot]
  Target[Target DOM element] --> Hydrate
  Hydrate --> Root[Root object]
  Root --> DOM[Rendered DOM]
```

## Usage

```tsx
import { hydrateRoot } from 'hono/jsx/dom/client'
import { App } from './app'

const container = document.getElementById('app')

if (container) {
  hydrateRoot(container, <App />)
}
```

## AI Coding Instructions

- Pass the DOM element that should contain the application as the first argument.
- Pass the application JSX node as the second argument.
- Keep client entry code responsible for locating the target element before calling `hydrateRoot`.
- Treat hydration in `hono/jsx/dom` the same way as rendering when integrating application startup code.