> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.

# render

> Render a Preact virtual node into a DOM element

Renders a Preact virtual node into a DOM container element.

## Signature

```typescript theme={null}
function render(
  vnode: ComponentChild,
  parent: ContainerNode
): void
```

## Parameters

<ParamField path="vnode" type="ComponentChild" required>
  The virtual node to render. Can be a VNode, string, number, boolean, null, undefined, or arrays of these types.
</ParamField>

<ParamField path="parent" type="ContainerNode" required>
  The DOM element to render into. This will become the parent container for the rendered content.
</ParamField>

## Return Value

Returns `void`. The function performs a side effect by rendering content into the DOM.

## Description

The `render` function is the primary way to mount a Preact application to the DOM. It takes a virtual node tree and renders it into a specified DOM container.

Key behaviors:

* If `parent` is `document`, it automatically uses `document.documentElement` instead
* Supports multiple calls on the same DOM node by tracking previous renders via `_children` property
* Creates a root Fragment wrapper around the vnode
* Handles both initial mounting and updates to existing trees

## Usage Examples

### Basic Rendering

```jsx theme={null}
import { render, h } from 'preact';

function App() {
  return <div>Hello World!</div>;
}

render(<App />, document.getElementById('root'));
```

### Rendering Multiple Times

```jsx theme={null}
import { render, h } from 'preact';

const container = document.getElementById('root');

// Initial render
render(<div>First render</div>, container);

// Subsequent render updates the same container
render(<div>Updated render</div>, container);
```

### Rendering Text and Primitives

```jsx theme={null}
import { render } from 'preact';

const container = document.getElementById('root');

// Render a string directly
render('Hello World', container);

// Render a number
render(42, container);

// Render null (clears the container)
render(null, container);
```

## Implementation Details

The render function is implemented in `src/render.js:12`.

When called:

1. Checks if parent is `document` and uses `documentElement` instead
2. Invokes `options._root` hook if present
3. Wraps the vnode in a Fragment to create a consistent root
4. Calls the internal `diff` algorithm to reconcile changes
5. Commits all effects via `commitRoot`

## Related APIs

* [`hydrate`](/api/hydrate) - Attach Preact to existing server-rendered markup
* [`h`](/api/h) - Create virtual nodes
* [`Fragment`](/api/fragment) - Render multiple children without a wrapper element