---
name: vani-incremental-mount
description: Mount Vani components inside existing apps or DOM islands
---

# Incremental Mounting

Instructions for embedding Vani components into existing applications via mount points.

## When to Use

Use this when adding a Vani widget inside a non-Vani app or server-rendered page.

## Steps

1. Create a Vani component with explicit updates.
2. Find or create a DOM mount node inside the host app.
3. Call `renderToDOM(Widget(), mountNode)` (arrays also work) and store the returned handles.
4. On host unmount/cleanup, call `handle.dispose()` for each handle.

## Arguments

- mountSelector - CSS selector or id for the mount point (defaults to `#app`)
- componentName - name of the embedded component (defaults to `Widget`)
- cleanupStrategy - how cleanup is triggered (defaults to `onUnmount`)

## Examples

Example 1 usage pattern:

Embed a Vani counter inside a React or server-rendered page using a `div` mount node.

Example 2 usage pattern:

Create multiple independent widgets with separate mount points and dispose them on teardown.

## Output

Example output:

```
Created: src/widget.ts
Updated: src/host-integration.ts
Notes: Handles are disposed when the host unmounts.
```

## Present Results to User

Explain the mount point, how handles are stored and disposed, and list file changes.