# createRoot

**Kind:** Function

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

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

Create a root object for rendering

`createRoot` creates a root object bound to a DOM container for JSX rendering. Use the returned root to render application content into that container and manage its mounted output.

## Signature

```ts
function createRoot(element: HTMLElement | DocumentFragment, options: RootOptions): Root
```

## Parameters

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

**Returns:** `Root`

## Diagram

```mermaid
graph LR
  Container[DOM container] --> CreateRoot[createRoot]
  CreateRoot --> Root[Root object]
  Root --> Render[render JSX]
  Render --> DOM[Rendered DOM]
```

## Usage

```ts
import { createRoot } from "./jsx/dom/client";

const container = document.getElementById("app");

if (container) {
  const root = createRoot(container);

  root.render(<main>Hello, world!</main>);
}
```

## AI Coding Instructions

- Pass a valid DOM container to `createRoot` before rendering JSX.
- Keep the returned root instance and call its rendering methods instead of creating a new root for each update.
- Create the root at the application entry point where the target container is available.
- Ensure JSX output is rendered through the root associated with the intended container.